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

前端技术 2023/09/04 JavaScript

刚接触学会用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数据格式的，然后分别取值赋值给页面元素，所以代码往往是这样的。

 

如果数据再多点，真的是感觉略难看。其实应该是有更好的做法的，返回的是一个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请求参数和返回数据的处理，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/11045

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案