jquery的ajax异步请求接收返回json数据实例
&更新时间：日 11:50:37 & 投稿：shichen2014
jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。这篇文章对此进行了实例介绍,需要的朋友可以参考下
jquery的ajax异步请求接收返回json数据方法设置简单，一个是服务器处理程序是返回json数据，另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以。
代码示例如下：
$('#send').click(function () {
&&& $.ajax({
&&&&&&& type : "GET",
&&&&&&& url : "a.php",
&&&&&&& dataType : "jsonp",
&&&&&&& success : function (data) {
&&&&&&&&&&& $.each(data.items, function (i, item) {
&&&&&&&&&&&&&&& $("&img class='para'/& ").attr("src", item.media.m).appendTo("#resText");
&&&&&&&&&&&&&&& if (i == 3) {
&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& }
&&&&&&&&&&& });
$.ajax方法如下：
&& type: "POST",
&& url:& ctxRoot+'FolderAction!saveInformSetting.action',
&& data: 'jsonStr=' + inform_settingListStr,
&& dataType: "json",
&& complete: function(data){
&&&&&& //在这里做些事情，假设返回的json数据里有name这个属性
&&&&&& //有时候可以直接data.name或者data['name']去访问
&&&&&& //但有时候，却要通过var jsonData = eval("("+data.responseText+")");才可以通过jsonData.name访问，而且这种情况下，需要是complete而不是success
$.ajax(options)
这是最根本的JQuery Ajax方法，只有一个参数options，该options参数中包含了请求信息和回调函数的信息。参数内容都是key:value对形式出现，并且都是可选的。
语法如下：
$.ajax({options});
url：(string)发送请求的地址，可以是服务器页面也可以是WebService动作。
type：(string)请求方式，POST或GET
data：(object)向服务器发送请求时带去的数据。是key:value对形式，如：{name:"grayworm",sex:"male"}，如果是数组{works:["work1","work2"]}
dataType：(string)预期返回的数据类型。xml,html,json,text等
beforeSend：（Function）发送ajax请求前被触发，如果返回false则取消本次请求。如果异步请求需要显示gif动画，那应当在这里设置相应&img&的可见。
PS：这里再为大家推荐几款比较实用的json在线工具供大家参考使用：
在线JSON代码检验、检验、美化、格式化工具：
JSON在线格式化工具：
在线XML/JSON互相转换工具：
json代码在线格式化/美化/压缩/编辑/转换工具：
在线json压缩/转义工具：
C语言风格/HTML/CSS/json代码格式化美化工具：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具随笔- 251&
1 jquery向服务器发送一个ajax请求后，可以返回多种类型的数据格式，包括：html,xml,json,text等。
3 1.html格式的数据
5 "&div class='comment'&&h6& "+username+" :&/h6&&p class='para'& "+content+" &/p&&/div&"
7 服务器端返回数据格式是html片段，因此不需要经过处理就可以将新的html数据插入到主页面中，这种方法虽然简便，但是重用性不强。
9 $.ajax({
type:"POST",
url:"Handler.ashx",
dataType:html,
data:{username:$("#name").val(),password:$("#pwd").val()},
success:function(data){
$("#result").html(data);
27 2.XML格式的数据
29 Response.Write("&?xml version=""1.0"" encoding=""utf-8""?&")
30 Response.Write("&comments&")
31 Response.Write("&comment username='"+username+"'&")
32 Response.Write("&content&"+content+"&/content&")
33 Response.Write("&/comment&")
34 Response.Write("&/comments&")
36 Response.End();
38 由于服务器端返回的数据格式是XML文档，因此需要对文档的数据进行处理。
40 $.ajax({
type:"POST",
url:"Handler.ashx",
dataType:xml,
data:{username:$("#name").val(),password:$("#pwd").val()},
success:function(data){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "&div class='comment'&&h6&"+
username+":&/h6&&p class='para'&"+content+"&/p&&/div&";
$("#result").html(txtHtml)
61 3.JSON格式的数据
63 Response.Write("{ username : '"+username+"' , content : '"+content+"'}")
65 由于服务器端返回的数据格式是JSON文档，因此也需要对文档的数据进行处理，但是JSON文档比较XML文档更容易解析。
67 $.ajax({
type:"POST",
url:"Handler.ashx",
dataType:json,
data:{username:$("#name").val(),password:$("#pwd").val()},
success:function(data){
var username = data.
var content = data.
var txtHtml = "&div class='comment'&&h6&"+
username+":&/h6&&p class='para'&"+content+"&/p&&/div&";
$("#result").html(txtHtml)
阅读(...) 评论()ajax处理服务器返回的三种数据类型方法
原创
 20:08:11
255
这篇文章主要介绍了ajax如何处理服务器返回的三种数据类型,具有一定的参考和学习ajax的价值，对ajax感兴趣的小伙伴们可以参考一下其原理很简单，结构上基本不变，只是改变处理返回数据的方式.1.Text/HTML格式 这种返回类型处理很简单，直接就当作字符串用就行了.为了方便使用，封装成如下函数:/**
* @function 利用ajax动态交换数据(Text/HTML格式)
* @param url
要提交请求的页面
* @param jsonData 要提交的数据,利用Json传递
* @param getMsg 这个函数可以获取到处理后的数据
function ajaxText(url,jsonData,getMsg)
//创建Ajax对象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(&Microsoft.XMLHTTP&);
//打开请求
oAjax.open('POST',url,true);//方法,URL,异步传输
//发送请求
var data = '';
for(var d in jsonData)
//拼装数据
data += (d + '=' +jsonData[d]+'&');
oAjax.setRequestHeader(&Content-type&,&application/x-www-form-urlencoded&);
oAjax.send(data);
//接收返回,当服务器有东西返回时触发
oAjax.onreadystatechange = function ()
if(oAjax.readyState == 4 && oAjax.status == 200)
if(getMsg) getMsg(oAjax.responseText);
}服务器端返回数据格式如下: 例如://返回的是xml格式
//header(&Content-Type:text/charset=utf-8&);
//返回的是text或Json格式
header(&Content-Type:text/charset=utf-8&);
//禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据
header(&Cache-Control:no-cache&);
$username = $_POST['username']; //获取用户名
if(empty($username))
echo '请输入用户名';
else if($username == 'acme')
echo '用户名已被注册';
echo '用户名可用';调用格式如下:url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
//do something
}2.XML格式 返回的是一个XML DOM对象，解析其中的数据就类似于HTML DOM 编程. 比如通过name获取标签对象(数组形式)，再从该数组中获取需要的标签对象，再从标签对象中获取文本值. 函数如下:/**
* @function 利用ajax动态交换数据(XML格式)
* @param url
要提交请求的页面
* @param jsonData 要提交的数据,利用Json传递
* @param tagName 要获取值的标签名
* @param getMsg 这个函数可以获取到处理后的数据
function ajaxXML(url,jsonData,tagName,getMsg)
//创建Ajax对象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(&Microsoft.XMLHTTP&);
//打开请求
oAjax.open('POST',url,true);//方法,URL,异步传输
//发送请求
var data = '';
for(var d in jsonData)
//拼装数据
data += (d + '=' +jsonData[d] + '&');
oAjax.setRequestHeader(&Content-type&,&application/x-www-form-urlencoded&);
oAjax.send(data);
//接收返回,当服务器有东西返回时触发
oAjax.onreadystatechange = function ()
if(oAjax.readyState == 4 && oAjax.status == 200)
var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
var oTag = oXml.getElementsByTagName(tagName);
var tagValue = oTag[0].childNodes[0].nodeV
if(getMsg)getMsg(tagValue);
}服务器端返回数据格式如下: 例如://返回的是xml格式
header(&Content-Type:text/charset=utf-8&);
//返回的是text或Json格式
//header(&Content-Type:text/charset=utf-8&);
//禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据
header(&Cache-Control:no-cache&);
$username = $_POST['username']; //获取用户名
if(empty($username))
echo '&user&&mes&请输入用户名&/mes&&/user&'; //这些标签可以自定义
else if($username == 'acme')
echo '&user&&mes&用户名已被注册&/mes&&/user&';
echo '&user&&mes&用户名可用&/mes&&/user&';调用格式如下:var url = 'abc.php';
var jsonData = {username:'acme'};
ajaxXML(url,jsonData,'mes',getMsg);
function getMsg(msg)
//do something
}3.返回json 函数如下：/**
* @function 利用ajax动态交换数据(Text/HTML格式)，但是返回的是Json类型的文本数据
* @param url
要提交请求的页面
* @param jsonData 要提交的数据,利用Json传递
* @param getMsg 这个函数可以获取到处理后的数据
function ajaxJson(url,jsonData,getMsg)
//创建Ajax对象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(&Microsoft.XMLHTTP&);
//打开请求
oAjax.open('POST',url,true);//方法,URL,异步传输
//发送请求
var data = '';
for(var d in jsonData)
//拼装数据
data += (d + '=' +jsonData[d] + '&');
oAjax.setRequestHeader(&Content-type&,&application/x-www-form-urlencoded&);
oAjax.send(data);
//接收返回,当服务器有东西返回时触发
oAjax.onreadystatechange = function ()
if(oAjax.readyState == 4 && oAjax.status == 200)
var json = eval('('+oAjax.responseText+')');//把传回来的字符串解析成json对象
if(getMsg)getMsg(json);
}服务器端返回数据格式如下: 例如://返回的是xml格式
//header(&Content-Type:text/charset=utf-8&);
//返回的是text或Json格式
header(&Content-Type:text/charset=utf-8&);
//禁用缓存,是为了数据一样的前提下还能正常提交，而不是缓存数据
header(&Cache-Control:no-cache&);
$username = $_POST['username']; //获取用户名
if(empty($username))
echo '{&mes&:&请输入用户名&}';
else if($username == 'acme')
echo '{&mes&:&用户名已被注册&}';
echo '{&mes&:&用户名可用&}';调用格式如下:url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
//do something
}为了方便使用，可以把三个函数合并.合并后的函数如下:/**
* @function 利用ajax动态交换数据
* @param url
要提交请求的页面
* @param jsonData 要提交的数据,利用Json传递
* @param getMsg 这个函数可以获取到处理后的数据
* @param type
接受的数据类型,text/xml/json
* @param tagName type = xml 的时候这个参数设置为要获取的文本的标签名
* @return 无
function ajax(url,jsonData,getMsg,type,tagName)
//创建Ajax对象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(&Microsoft.XMLHTTP&);
//打开请求
oAjax.open('POST',url,true);//方法,URL,异步传输
//发送请求
var data = '';
for(var d in jsonData)
//拼装数据
data += (d + '=' +jsonData[d]+'&');
oAjax.setRequestHeader(&Content-type&,&application/x-www-form-urlencoded&);
oAjax.send(data);
//接收返回,当服务器有东西返回时触发
oAjax.onreadystatechange = function ()
if(oAjax.readyState == 4 && oAjax.status == 200)
if(type == 'text')
if(getMsg) getMsg(oAjax.responseText);
else if(type == 'json')
var json = eval('('+oAjax.responseText+')');//把传回来的字符串解析成json对象
if(getMsg)getMsg(json);
else if(type == 'xml')
var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
var oTag = oXml.getElementsByTagName(tagName);
var tagValue = oTag[0].childNodes[0].nodeV
if(getMsg)getMsg(tagValue);
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。相关推荐：以上就是ajax处理服务器返回的三种数据类型方法的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
点击数(111086)
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
点击数(109025)
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
点击数(83675)
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
点击数(82874)
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
点击数(80094)
全栈工程师
文章总浏览数
相关视频章节/*XML：可扩展标记语言
HTML：超文本标记语言
标签：&标签名&&/标签名&
1.必须要有一个根
2.标签名自定义
3.对大小写敏感
4.有开始就要有结束
5.同一级别下只能有一个标签名
&code&n001&/code&
&name&汉族&/name&
&code&n002&/code&
&name&回族&/name&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
&script src="jquery-1.11.2.min.js"&&/script&
&select id="sel"&
&script type="text/javascript"&
url:"xmlchuli.php",
dataType:"XML",
success: function(data){
//alert($(data).find("code").eq(1).text());
alert($(data).find("nation").attr("bs"));
var allcode = $(data).find("code");
var allname = $(data).find("name");
var str ="";
for(var i=0;i&allcode.i++)
var code = allcode.eq(i).text();
var name = allname.eq(i).text();
str = str +"&option value='"+code+"'&"+name+"&/option&";
$("#sel").html(str);
处理页面：
include("DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation";
$attr = $db-&Query($sql);
echo "&nation bs='1'&";
foreach($attr as $k=&$v)
echo "&n{$k}&&code&{$v[0]}&/code&&name&{$v[1]}&/name&&/n{$k}&";
echo "&/nation&";
阅读(...) 评论()ajax返回几种数据类型？？？_百度知道
ajax返回几种数据类型？？？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
山西优就业
来自电脑网络类芝麻团
山西优就业
采纳数：549
获赞数：125
参与团队：
text/html/script/xml/json等，他们当然都是响应数据的，就像你发送了一个链接，服务器返回这个链接所对应的表现形式。最基础的ajax只有两种数据相应：即XMLHttpRequest 对象的 responseText 或 responseXML 属性。responseText
获得字符串形式的响应数据。
responseXML
获得 XML 形式的响应数据。
不要复制啊
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}