脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery中的ajax-（json数据格式）代码实例讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
一：基本内容
json——javascript object notation(js原生支持）；数据格式源于javascript,易于程序员阅读与编写，易于计算机解析和生 成，在网络上使用较广泛，几乎取代了XMl格式。结构其实就是数组，对象，或者数组对象嵌套。它还支持string,number,booloean,object,array,null数据类型。
二：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(){
$.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.'"}';
?>
一：基本内容
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.'"}';
?>
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-jQuery中的ajax-（json数据格式）代码实例讲解全部内容，希望文章能够帮你解决js实例教程-jQuery中的ajax-（json数据格式）代码实例讲解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。