浅析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 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
jQuery filter函数使用方法
May 19 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
php权重计算方法代码分享
2014/01/09 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript 打印页面代码
2009/03/24 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python生成词云的实现代码
2020/01/14 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
中国跨境电商:Tomtop
2017/03/16 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
广告艺术设计专业自荐书
2014/07/08 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang