浅析jQuery Ajax请求参数和返回数据的处理
转载 & & 作者：好JSER
这篇文章主要介绍了浅析jQuery Ajax请求参数和返回数据的处理的相关资料,需要的朋友可以参考下
刚接触学会用jQuery ajax的时候，觉得真东西好神奇，这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上，一颗赛艇。
之前很早接触到项目，并不知道怎么优雅的去用jquery ajax（现在也不优雅）；
那个时候看别人写的代码
$.post("","",...)
$.get("","",...)
当然现在知道点，这些写法都是一个意思，还是习惯用 $.ajax() 写写吧。
之前的数据处理，发送数据请求(json的数据格式)，然后自己通过下面的方式
var request = {};
request.name = $(".name").val();
request.age = $(".age").val();
request.sex = $(".sex").val();
当时表单发送的参数项少，所以没觉得什么，到后来一个表单很多项数，也这么写，结果 request 就手工写了好多行，虽然能用吧，但是看看这样的代码就觉着哪里不对劲吧，至少很不“优雅”。
后来，发现其实jquery有个 serialize 的方法可以序列化表单数据，可以省事很多。
处理返回数据，渲染到页面上去。
之前的做法也是和上面一模一样的吧，返回的数据是json数据格式的，然后分别取值赋值给页面元素，所以代码往往是这样的。
如果数据再多点，真的是感觉略难看。其实应该是有更好的做法的，返回的是一个json对象，所以我们可以通过遍历对象的属性值取到所有值然后依次渲染到页面对应元素即可。
对象遍历可以用 for-in 来写（有更好的方法来写么？）
success:function(result){
for(var v in result){
// 如果渲染的元素都是统一的输入框形式的话，
$("form").find("input[name="+ v +"]").val(result[v]);
// 如果有其他元素 则另外单独校验处理
上面name(或者其他tag在页面中先写好，和返回数据的属性一致)。
jQuery中ajax的4种常用请求方式
1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。
如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。
保存数据到服务器，成功时显示信息。
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if (data != "") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
2.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
3. 通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功！");
4.通过 HTTP GET 请求载入 JSON 数据。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("&img/&").attr("src", item.media.m).appendTo("#images");
if ( i == 3 )
以上内容是小编给大家介绍的jQuery Ajax请求参数和返回数据的处理，希望对大家有所帮助！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我在项目中写了一个Ajax请求，特别奇怪的是，用电脑测试时是没有问题的，当我用了公司的无线网，和我自己的手机流量时，页面就没有反应，于是我在Ajax中用了error方法来弹一些数据想看一下原因。可是返回的数据，让我很迷惑，Ajax代码大概如下：
url: '//请求地址',
dataType: 'jsonp',//对了我是跨域请求，再强调一下电脑是没有问题，这个错误就发生在我用手机时的几个特定网络
method: 'get',
error: function(XMLHttpRequest, textStatus, errorThrown){
alert('XMLHttpRequest.status: '+ XMLHttpRequest.status);
alert('XMLHttpRequest.readyState: '+ XMLHttpRequest.readyState);
alert('textStatus: '+ textStatus);
alert('errorThrown: '+errorThrown);
success: function(){}
以上就是我大概Ajax的部分，我想我写的够清楚了。我再说一下手机上显示的内容吧。
XMLHttpRequest.status: undefined
XMLHttpRequest.readyState: undefined
//好像就没取到XMLHttpRequest一样
textStatus: error//网上查了好久也没查到error代表什么，大概的错误原因啥的
errorThrown: null
大概的情况就如上所述，还希望大神能帮忙解释一下，我在不停的找原因，快疯了。谢谢啦。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在跨域方式下error回调是不会触发的，既然你的代码触发了error回调，说明你没有正确使用跨域。
以下内容摘自：
This handler is not called for cross-domain script and cross-domain JSONP requests.
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。jquery ajax例子返回值详解
转载 & & 作者：
$.ajax()跟($.post(),$.get())最主要的差别就是 成功回调后,执行success. . $.post(),$.get()就只能简单的做下传递 ,返回. .后续工作没法继续.所以看情况调用
在JQuery中，AJAX有三种实现方式：$.ajax() , $.post , $.get()。 首先我们看$.get():
代码如下: $.get("test.jsp", { name: "cssrain", time: "" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } )
然后看$.post(): 跟$.get()格式一样.
代码如下: $.post("test.jsp", { name: "cssrain", time: "" }, //要传递的数据 function(data){ alert("返回的数据: " + data); } )
上面2种方式的区别应该就是 请求方式不同(一个get 一个post). 最后我们看$.ajax():
代码如下: $.ajax({ url:'Accept.jsp', type:'post', //数据发送方式 dataType:'html', //接受数据格式 (这里有很多,常用的有html,xml,js,json) data:'text='+$("#name").val()+'&date='+new Date(), //要传递的数据 error: function(){ //失败 alert('Error loading document'); }, success: function(msg){ //成功 alert( "Data Saved: " + msg ); } });
实例 前台jsp部分的代码如下：... 票数:
代码如下: &span id="i&%=id%&"&&%=vote_number%&&/span&&br/& &a onclick=myvote(&%=id%&); href='javascript:;'"&投票&/a&
... js部分的代码如下
代码如下: function myvote(id){ $.post("vote.jsp", { id: id }, function(data){ eval("var data="+data); if (data.issucc=="0"){ alert(data.mess) }else{ //alert("更新页面"); $("#i"+data.myid).html(data.votenum); } }); }
返回数据为json 后台返回的json数据如下 {issucc:,mess:”“,votenum:,myid:} issucc:是否成功 mess:信息，主要是错误信息，比如没登录，超过限制等 votenum：投票后的得票总数 myid:投票的id，用于更新页面的投票数 一个注册登录实例 js login.jsp返回的类型为text形式，正确时是“OK”，错误时是 “error”。
代码如下: var userN
$(document).ready(function(){ $("#load").hide(); $("#success").hide(); $("#error").hide(); }); $(document).ready(function(){ $("#button").click(function(){ $("#error").hide(); $("#load").show("slow"); userName = $("#userName").val(); password = $("#password").val(); $.ajax({type: "post", url: "login.jsp", dataType: "html", data: "userName="+userName+"&password="+password, success: function(result){ var res = String($.trim(result)); if(res=="OK"){ $("#myTable").hide("slow"); $("#success").show("slow"); }else if(res=="error"){ $("#error").show("slow"); $("#load").hide("slow"); }else{ alert("返回异常");} } }); }); });
jsp页面 第一种responseText格式
代码如下: &%@ page language="java" pageEncoding="gb2312"%& &% String userName = request.getParameter("userName"); String password = request.getParameter("password"); if(password.equals("longleg")&&userName.equals("thy")){ out.print("OK"); }else{out.print("error");} %&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具输入关键字或相关内容进行搜索
mui.post(&http://192.168.1.81:88/appregister&, parm,function(data) {
console.log(data);
后台已经获取数据，并插入到数据库中，直接访问url的地址，返回一个文本0.
回调函数没执行，为什么呢？
赞助DCloud可免广告，
用zepto的ajax方法，加上同步async:false参数就可以了：
type: 'POST',
url: 'http://192.168.1.81:88/appregister',
// data to be added to query string:
data:param,
// type of data we are expecting in return:
dataType: 'text',
timeout: 3000,
context: $('body'),
async:false,
success: function(data){
alert(data);
error: function(xhr, type){
alert('Ajax error!')
}) }\nmui是怎么解决的呢？
用mui.ajax，然后配置error的回调，打印一下error看看是报的什么错误
你的出来没
要回复问题请先或
浏览: 1277
赞助DCloud可免广告，
赞助DCloud可免广告，JQuery.Ajax()的data参数类型实例详解
转载 & & 投稿：mrr
这篇文章主要介绍了JQuery.Ajax()的data参数类型实例详解,需要的朋友可以参考下
假如现在有这样一个表单，是添加元素用的。
&form id='addForm' action='UserAdd.action' type='post'&
&label for='uname'&用户名&/label&：&input type='text' name='uname' id='uname'&&br&
&label for='mobileIpt'&手机号：&/label&&input type='text' name='mobileIpt' id='mobileIpt'&&br&
&label for='birthday'&生日：&/label&&input type='text' name='birthday'&&br&
&input type='button' value='提交' onclick='addUser()'&
我们不想使用表单submit的方式添加这个元素，我们就想使用ajax提交。
以前我们是这样实现的：
function addUser(){
var user = {
uname:$("#uname").val(),
mobileIpt:$("#mobileIpt").val(),
birthday:$("#birthday").val()
url:'UserAdd.action',
data:user,
type:'post',
dataType:'text',
success:function(msg){
if(msg=='1'){
console.log('添加成功');
console.log('添加失败')
这没有什么错，就是获取表单元素的值实在是太麻烦....这里只有三项，很多项的时候就废了....
直到有一天，我发现了jquery的serializeArray方法
序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。
我们来试试看
$('#addForm').serializeArray();
//返回数据结构，是json数组，每个对像分别name和value为key，代表这个表单元素的name和value
{"name":"uname","value":""},
{"name":"mobileIpt","value":""},
{"name":"birthday","value":""}
这个貌似用不上啊
我们使用JQuery.param()方法处理一下：
var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday="
嘿这下符合我们的需求了吧，虽然不是json类型，但是至少可以作为data上传了。
这里我们可以直接在ajax的data处填上这个json数组，在jquery内部自己调用$.param()处理的。
我们来看下jquery.param()方法的说明：
返回值:StringjQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。
obj,[traditional]
数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。
traditional:是否使用传统的方式浅层序列化。
$.param({uanme:'vic',mobileIpt:'110',birthday:''});
"uanme=vic&mobileIpt=110&birthday="
看着说明，貌似也跟我们没关系啊,我们换一个json数组来看
$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:''}]);
"undefined=&undefined=&undefined="
这个转换不成功了吧，为什么我们表单的那种数据能够成功转换成url参数呢？我们来看下jquery源码
//在ajax()方法中，对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
s.data = jQuery.param( s.data, s.traditional );
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
// Serialize the form elements
jQuery.each( a, function() {
add( this.name, this.value );
// If traditional, encode the "old" way (the way 1.3.2 or older
// did it), otherwise encode params recursively.
for ( prefix in a ) {
buildParams( prefix, a[ prefix ], traditional, add );
这下明白了吧，如果是json数据，那么挨个循环，只取他们的name属性和value属性拼接字符串。
如果是普通对象，循环该对象的属性，然后拼接字符串。
所以，本文要说的是，在jquery的ajax函数中，可以传入3种类型的数据
1.文本："uname=alice&mobileIpt=110&birthday="
2.json对象：{uanme:'vic',mobileIpt:'110',birthday:''}
3.json数组：
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":""}
所以，我们可以一键获取表单并提交，非常方便。
其实提取表单数据的话只需要serialize()方法直接获取"uname=alice&mobileIpt=110&birthday="这样的就可以了。
ps：jquery中ajax方法data参数的用法小结
type: post,
url: some.php,
data: name=john&location=boston, //第一种方式传参
// data: {name:john,location:boston} //第二种方式传参
// data: {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2'
第一种我们用url传参，参数里面如果加带&这个符号地话，可能参数接收不到或不完整，
如“ data: name=john&location=boston,” 如果name地值是john&smith这样写可能就会有问题，
我们可以用js里面地encodeuricomponent()方法进行转义，
但如果用data: {name:john,location:boston}这种方式写地话就不需要进行转义，
如果转义地话，接收地将是转义后地字符串
success: function(msg){
alert( data saved: + msg );
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具