一:基本内容
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
jquery中的ajax实现二级联动-请选择-
-请选择-
$(function(){
var pd={"status":1};
$.get("jqueryejld.php",pd,function(data){
for(var i=0;i
$("#province").append($(""+data[i]+""));
}
},"json");
});
province.οnchange=function(){
$("#city").empty().append($("-请选择-"));
var pr={"status":2,"province":$("#province").val()};
$.post("jqueryejld.php",pr,function(data){
for(var i=0;i
$("#city").append($(""+data[i]+""));
}
},"json")
}
php代码:
[html] view plain copy
$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
表单的ajax异步请求表单序列化男女
function formsubmit(){
var data=$("#myform").serialize();
$.post("formxlh.php",data,function(data){
console.log(data);
},"json");
return false;
}
php代码:
[html] view plain copy
$username=$_post['username'];
$pwd=$_post['pwd'];
$r1=$_post['r1'];
echo'{"username":"'.$username.'","pwd":"'.$pwd.'","r1":"'.$r1.'"}';
?>