ajax in jQuery - (json data format)

One: basic content

json - javascript object notation (js native support); the data format is derived from javascript, which is easy for programmers to read and write, easy for computer to parse and generate, and is widely used on the Internet, almost replacing the xml format. Structures are actually arrays , objects , or nested arrays of objects . It also supports string, number, booloean, object, array, null data types.

Here I mainly talk about ajax in jQuery, because it is relatively simple and easy to learn.

Two: ajax in jQuery

1. jQuery mainly encapsulates several methods and uses them to achieve asynchronous interaction:

(1) The first layer of encapsulation: similar to the usage of native ajax

* $.ajax() - This method is the most complicated and will not be described in detail here.

(2) The second layer of encapsulation: re-encapsulate based on the first layer

* $().load(url, data, callback) - the simplest and most limited, and cannot use XML, JSON data formats.

* $.get(url,data,callback,type) - the request type is GET

* url: Set the request address of the current ajax

* data: Set the current ajax request data, the format requires key:value, and you can build an Object

* callback: The callback function after the ajax request is successful; the formal parameter (data) of the function represents the data content of the server-side response

* type: Set the data format of the server-side response, the default is html format, xml: xml format, json: json format.

* $.post(url,data,callback,type) - the request type is POST

* The usage is the same as the $.get() method.

Note : In jquery, you actually master the two methods of $.get() and $.post(), and it is not difficult to achieve asynchronous interaction.

eg: Use jquery's $.get(), and $.post() to realize the previous secondary linkage case

html code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax in JQuery realizes secondary linkage</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<select id="province">
	<option>-Please select-</option>
</select>
<select id="city">
	<option>-Please select-</option>
</select>
<script>
$(function(){
	var pd={"status":1};
	$.get("jqueryejld.php",pd,function(data){
		for(var i=0;i<data.length;i++){
		     $("#province").append($("<option>"+data[i]+"</option>"));
		}
	},"json");
});
	province.onchange=function(){
		$("#city").empty().append($("<option>-请选择-</option>"));
		var pr={"status":2,"province":$("#province").val()};
		$.post("jqueryejld.php",pr,function(data){
			for(var i=0;i<data.length;i++){
			$("#city").append($("<option>"+data[i]+"</option>"));	
			}
		},"json")
	}
	
</script>
</body>
</html>

php code:

<?php
$status=$_REQUEST['status'];
if($status==1){
	echo'["Chongqing","Beijing","Tianjin","Hebei"]';
}
else{
	$province=$_REQUEST['province'];
	 switch($province){
		case 'Chongqing City':
			echo'["Yuzhong District","Yubei District","Shapingba District","Jiulongpo District","Liangjiang New District","Beibei District"]';
			break;
		case 'Beijing':
			echo'["Dongcheng District","Xicheng District","Haidian District","Chaoyang District"]';
			break;
		case 'Tianjin':
			echo'["Hedong District","Hexi District","Nankai District"]';
			break;
		case 'Hebei Province':
			echo'["Shijiazhuang City","Langfang City","Baoding City","Tangshan City","Qinhuangdao City"]';
			break;
	}
}
?>

Three: Ajax asynchronous request of form

(1) Serialization of the form

1. serialize() method

* Returns a JSON string in the format {key:value,key:value,...} , so $.get and post use it.

* Function: Set the request data of ajax to avoid too much form data and too complicated to manually construct the key:value format.

2. serializeArray() method

*Return JSON object, format [obj1,obj2,obj3,...];

3. Note: Form elements must have a name attribute value

(2) Asynchronous form submission method

1. Instead of using the submit button, use the button button.

(1) Bind the click event through the button button

* Serialization of the form

* Asynchronous submission of the form

2. Still use the submit button ( recommended )

(1) Bind the onsubmit event in the form element

(2) In the handler of the onsubmit event

* Serialization of the form

* Asynchronous submission of the form

* Prevent form default behavior (return false)

eg: Use the onsubmit button to achieve asynchronous form submission, form serialization case

html code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX asynchronous request form serialization for forms</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<form id="myform" action="formxlh.php" method="post" onSubmit="return formsubmit();">
	<input type="text" name="username"><br>
	<input type="text" name="pwd"><br>
	<input type="radio" name="r1" value="男孩子">男<input type="radio" name="r1" value="女">女<br>
	<input type="submit" value="注册">
</form>
<script>
function formsubmit(){
	var data=$("#myform").serialize();
	$.post("formxlh.php",data,function(data){
		console.log(data);
	},"json");
	return false;
}	
</script>
</body>
</html>

php code:

<?php
$username=$_POST['username'];
$pwd=$_POST['pwd'];
$r1=$_POST['r1'];
echo'{"username":"'.$username.'","pwd":"'.$pwd.'","r1":"'.$r1.'"}';

?>

Need to know more about ajax to click open the link

ajax in jQuery - (json data format)

Guess you like