浅析jQuery Ajax请求参数和返回数据的处理


Posted in Javascript onFebruary 24, 2016

刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上,一颗赛艇。

之前很早接触到项目,并不知道怎么优雅的去用jquery ajax(现在也不优雅);

那个时候看别人写的代码

$.post("","",...)

也有

$.get("","",...)

还有

$.ajax()

当然现在知道点,这些写法都是一个意思,还是习惯用 $.ajax() 写写吧。

之前的数据处理,发送数据请求(json的数据格式),然后自己通过下面的方式

var request = {};
request.name = $(".name").val();
request.age = $(".age").val();
request.sex = $(".sex").val();
//...

当时表单发送的参数项少,所以没觉得什么,到后来一个表单很多项数,也这么写,结果 request 就手工写了好多行,虽然能用吧,但是看看这样的代码就觉着哪里不对劲吧,至少很不“优雅”。

后来,发现其实jquery有个 serialize 的方法可以序列化表单数据,可以省事很多。

w3c_jquery_serialize-demo

处理返回数据,渲染到页面上去。

之前的做法也是和上面一模一样的吧,返回的数据是json数据格式的,然后分别取值赋值给页面元素,所以代码往往是这样的。

  浅析jQuery Ajax请求参数和返回数据的处理

如果数据再多点,真的是感觉略难看。其实应该是有更好的做法的,返回的是一个json对象,所以我们可以通过遍历对象的属性值取到所有值然后依次渲染到页面对应元素即可。

对象遍历可以用 for-in 来写(有更好的方法来写么?)

$.ajax({
//...
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")。

实例:

保存数据到服务器,成功时显示信息。

$.ajax({
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 ) return false;
});
});

以上内容是小编给大家介绍的jQuery Ajax请求参数和返回数据的处理,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
理解Javascript的call、apply
Dec 16 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 #Javascript
JQuery EasyUI的使用
Feb 24 #Javascript
使用jQuery监听DOM元素大小变化
Feb 24 #Javascript
JavaScript中的闭包
Feb 24 #Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 #Javascript
jquery中键盘事件小结
Feb 24 #Javascript
javascript实现九宫格相加数值相等
May 28 #Javascript
You might like
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
keep-alive保持组件状态的方法
2020/12/02 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python对数组进行反转的方法
2015/05/20 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
希特勒经典演讲稿
2014/05/19 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
出国留学单位推荐信
2015/03/26 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
国际贸易实训总结
2015/08/03 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
python调试工具Birdseye的使用教程
2021/05/25 Python