jQuery中的ajax-（json数据格式）代码实例讲解
一：基本内容
json——javascript object notation(js原生支持）；数据格式源于javascript,易于程序员与编写，易于计算机解析和生 成，在网络上使用较广泛，几乎取代了xml格式。结构其实就是数组，对象，或者数组对象嵌套。它还支持string,number,booloean,object,array,null数据类型。
这儿主要讲jquery中的ajax，因为比较简单，易学。
二：jquery中的ajax
1.jquery主要封装了几个方法，用它们来实现异步交互：
（1）封装第一层：类似于原生ajax的用法
* $.ajax()——这方法最复杂，这儿不做详细说明。
（2）封装第二层：基于第一层再次封装
* $().load(url,data,callback)——最简单局限性最大，而且无法使用xml,json数据格式。
* $.get(url,data,callback,type) ——请求类型是get
* url：设置当前ajax的请求地址
* data:设置当前ajax的请求数据，格式要求key:value,构建object即可
* callback:ajax请求成功后的回调函数；该函数的形参（data），表示服务器端响应的数据内容
* type:设置服务器端响应的数据格式，默认为html格式，xml:xml格式，json：json格式。
* $.post(url,data,callback,type)——请求类型是post
* 使用方式与$.get（）方法一致。
注：jquery中其实掌握$.get(),与$.post()这两个方法，实现异步交互其实就不难了。
eg:用jquery的$.get(),与$.post()两个方法实现之前的二级联动案例
html代码：
[html] view plain copy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery中的ajax实现二级联动</title>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<select id="province">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</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代码：
[html] view plain copy
<?php
$status=$_request['status'];
if($status==1){
echo'["重庆市","北京市","天津市","河北省"]';
}
else{
$province=$_request['province'];
switch($province){
case '重庆市':
echo'["渝中区","渝北区","沙坪坝区","九龙坡区","两江新区","北碚区"]';
break;
case '北京市':
echo'["东城区","西城区","海淀区","朝阳区"]';
break;
case '天津市':
echo'["河东区","河西区","南开区"]';
break;
case '河北省':
echo'["石家庄市","廊坊市","保定市","唐山市","秦皇岛市"]';
break;
}
}
?>
三：表单的ajax异步请求
（一）表单的序列化
1.serialize()方法
* 返回json字符串，格式{key:value,key:value,......},所以$.get,post都用它。
* 作用：设置ajax的请求数据，以免表单数据太多，手工构建key:value格式太复杂。
2.serializearray()方法
*返回json对象，格式[obj1,obj2,obj3,......];
3.注意：表单元素必须具有name属性值
（二）表单异步提交方式
1.不在使用submit按钮，而是使用button按钮。
（1）通过button按钮绑定click事件
* 表单的序列化
* 表单的异步提交
2. 依旧使用submit按钮（建议使用）
（1）在form表单元素中绑定onsubmit事件
（2）在onsubmit事件的处理函数中
* 表单的序列化
* 表单的异步提交
* 阻止表单默认行为（return false）
eg:使用onsubmit按钮实现表单异步提交，表单序列化案例
html代码：
[html] view plain copy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单的ajax异步请求表单序列化</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代码：
[html] view plain copy
<?php
$username=$_post['username'];
$pwd=$_post['pwd'];
$r1=$_post['r1'];
echo'{"username":"'.$username.'","pwd":"'.$pwd.'","r1":"'.$r1.'"}';
?>
下一篇： [.net]从比较两个字节数组谈起
推荐阅读
-
jQuery中的ajax-（json数据格式）代码实例讲解
-
python中内置函数和json、pickle的数据序列化代码实例
-
JQuery Ajax 在asp.net中的使用并调用后台实例讲解
-
C#中把Datatable转换为Json的5个代码实例
-
JQuery中window.onload函数与$(document).ready()的区别实例讲解
-
jquery获取css中的选择器(实例讲解)
-
jQuery与Ajax的应用（jQuery中的Ajax）实例讲解
-
jQuery中ztree 点击文本框弹出下拉框的实例代码
-
jQuery UI Grid 模态框中的表格实例代码
-
C#中Json字符串的各种应用类实例讲解