ajax数据列化格式,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

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.'"}';

?>