jquery的ajax异步请求接收返回json数据实例
投稿：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
最近更新的内容
常用在线小工具jQuery.ajax(&options&)&:&通过&HTTP&请求加载远程数据
这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest
对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如
xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见
当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 。使用
形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ?
为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。(这个我不是很懂)
参数列表：
(默认: 当前页地址) 发送请求的地址。
(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为
"GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
(默认: true)
默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为
false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义
HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
this; // the options for this ajax request
(默认: true) jQuery 1.2 新功能，设置为 false
将不会从浏览器缓存中加载请求信息。
请求完成后回调函数 (请求成功或失败时均调用)。参数：
XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
contentType
"application/x-www-form-urlencoded")
发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在
URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery
将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为
'&foo=bar1&foo=bar2'。
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或
responseText，并作为回调函数参数传递，可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
格式。使用
形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ?
为正确的函数名，以执行回调函数。
(默认: 自动判断 (xml 或 html))
请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
(默认: true) 是否触发全局 AJAX 事件。设置为 false
将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包
Last-Modified 头信息判断。
processData
(默认: true)
默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型
"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
这里有几个Ajax事件参数：beforeSend
，success ，complete ，error
。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的
this 都是指向Ajax请求的选项信息的(请参考说 get()
方法时的this的图片)。
请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。
示例代码，获取博客园首页的文章题目：
type: "get",
url: "/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("&li&"+$(domEle).children("title").text()+"&/li&");
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
error: function(){
//请求出错处理
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
jquery发送ajax请求，参数怎么放到http请求的body里面
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
url: "/gitit-bigger"
type: "post",
dataType: "json",
data: "hello world",
headers: {'Content-Type': 'application/json'},
success: function (res) {
if (res.status == 1) {
window.location.reload();
alert(res.message);
这里的 data 就会在 body 体中。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
使用POST请求就会数据放在请求的body体中
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
使用jQuery提供的 $.post:
$.post("your service url",{
param1 : 1,
param2 : "tom",
},function(response){
// 处理返回
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
参考代码：// attempt to make an XMLHttpRequest
// jQuery 1.6.1
and Chrome
dev 13.0.767
function makeRequest() {
alert("inside makeRequest()");
var settings = {
type: "GET",
url:URL+"?"+REQUEST,
dataType:"xml",
error: function(XHR,textStatus,errorThrown) {
alert ("XHR="+XHR+"\ntextStatus="+textStatus+"\nerrorThrown=" + errorThrown);
success: function(data,textStatus) {
$("body").append(data);
headers: {
"Access-Control-Allow-Origin":"http://example.edu",
"Access-Control-Allow-Headers":"X-Requested-With"
$.ajax(settings);
阅读(29510)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'jquery ajax请求时，设置请求头信息',
blogAbstract:'设置一个名为 headers 的参数参考代码：// attempt to make an XMLHttpRequest \n// jQuery 1.6.1
and Chrome
dev 13.0.767\nfunction makeRequest() {\n
alert(\"inside makeRequest()\");\n
var settings = {\n
type: \"GET\",\n
url:URL+\"?\"+REQUEST,\n
dataType:\"xml\",\n
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:7,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}