JQuery Ajax 技术汇总小结

xuanxiao · 发表于 2022-6-29 22:32:44

在jquery的ajax函数中，可以传入3种类型的数据

文本：

"uname=alice&mobileIpt=110&birthday=1983-05-12"

复制代码

json对象：

{"uanme":"vic","mobileIpt":110,"birthday":"2013-11-11"}

复制代码

json数组：

[
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":110},
{"name":"birthday","value":"2012-11-11"}
]

复制代码

FormData对象：

它可以更灵活方便的发送表单数据，因为可以独立于表单使用,实现表单数据的序列化。
最大的好处是可以通过Ajax上传文件。如果它的字段类型不是Blob也不是File，则会被转换成字符串。
通过这种方式，可以非常方便的进行表单提交，直接表单转换成FormData对象即可。

var fd = new FormData(document.querySelector("form"));
data: fd,
processData: false, // 不处理数据
contentType: false // 不设置内容类型

复制代码

第一种写法（把参数拼接在URL中，data属性设为空{ }）

var id = "a";
var name = "语文";
url:"/sell/login?id="+id+"&name="+name,
data:{},

复制代码

第二种写法（参数写成json数据形式）

data:{
'name':'ld',
'user':'littledonkey'
},

复制代码

第三种写法（根据表单id属性，把表单封装数据，调用JQuery的serialize()方法序列化为字符串）
前提是：发送请求的必须是一个form表单，而且表单内要做参数的标签必须具有name属性，因为name属性会被认为请求参数名

var params=$('#login').serialize();    //把id为login的form表单里的参数自动封装为参数传递
data:params,
作用：序列表单内容为字符串。
参数：无
返回值：表单内容的字符串格式

serialize方法可以将表单序列化成一个拼接的字符串形式：
username=a&address=b&age=c

serializeArray方法可以将表单序列化成一个特殊的json数组,带有name和value的json：

返回值：返回的是JSON数组而非JSON字符串，返回格式为：
[
   {name: 'firstname', value: 'Hello'},
   {name: 'lastname', value: 'World'},
   {name: 'alias'}
  ]

优化：
第一种方法：

$.param(data); //将表单元素数组或者对象序列化。
name=alice&mobileIpt=110&birthday=1983-05-12

如果被传递的对象在数组中，则必须是以 .serializeArray() 的返回值为格式的对象数组：

[
{name:"first",age:"12"},
{name:"last",age:"11"},
{name:"job",age:"5"}
]

复制代码

第二种方法：

数组转换成对象：
  var data ={}；
  $("form").serializeArray().map(function(val){
   data[val.name]=val.value;
  })；

对象转换成json字符串：
var myJSON =  JSON.stringify(data );

{"name": "first", "age": "12"}

第四种写法（拼接data）

var id = "a";
var name = "语文";
data: "id=" + id + "&name=" + name,

复制代码

xuanxiao · 发表于 2022-6-30 09:32:23

一次完整的jquery ajax常用参数：

$.ajax({
url: "test.html", //ajax请求地址
cache: false,//(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面，建议使用默认
type:"GET",//请求方式 "POST" 或 "GET"，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
dataType:"json", //根据返回数据类型可以有这些类型可选：xml html script json jsonp text
//发送到服务器的数据，可以直接传对象{a:0,b:1}，如果是get请求会自动拼接到url后面，如：&a=0&b=1
//如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
data:{},
//发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
beforeSend:function(xhr){
//this 默认为调用本次AJAX请求时传递的options参数
},
//context这个对象用于设置ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。
//比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。
context: document.body,
//请求成功后的回调函数
success: function(data,textStatus){
//this 调用本次AJAX请求时传递的options参数 ,如果设置context来改变了this，那这里的this就是改变过的
},
//请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
//如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
error：function(XMLHttpRequest, textStatus, errorThrown){
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
// this 调用本次AJAX请求时传递的options参数
},
//请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串
complete:function(XMLHttpRequest, textStatus) {
//this 调用本次AJAX请求时传递的options参数
},
//一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
statusCode:{
404:function(){
alert('404，页面不存在');
}
}
});

复制代码

xuanxiao · 发表于 2022-6-30 09:37:14

jquery ajax发送一个get请求，数据返回为json
实战中最常用到的ajax方式获取数据，一般用get方式

$.ajax({
type: "GET",
url: "page.asp",
dataType:'json',
data: {id:1001},//也可以是字符串链接"id=1001"，建议用对象
success: function(data){
console.log("返回的数据: " + data );
}
});

复制代码

jquery ajax发送一个get请求，简写方式：
其实就是对ajax的二次封装，大家可以对照ajax的底层api

//$.get("请求url","发送的数据对象","成功回调","返回数据类型");
$.get("test.cgi",{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
},'json');

jquery ajax经常用到的一个工具函数
ajax提交数据的时候，通常是提交一个表单，所以，序列化表单数据就非常有用，如：$("form").serialize()

//完整实例如：（表单html结构不在写）

$("form").on("submit",function(){
var url = this.action; //可以直接取到表单的action
var formData = $(this).serialize();
$.post(url,formData,
function(data){
//返回成功，可以做一个其他事情
console.log(data);
},'json');
//阻止表单默认提交行为
return false
})

复制代码

jquery ajax请求成功回调改写成连写方式.done
ajax请求成功通常是使用回调的方式处理返回数据，其实jquery中也可以使用连写方式而不是回调的方式。如下：

//该参数可以是一个函数或一个函数的数组。当延迟成功时，done中函数被调用。回调执行是依照他们添加的顺序。
//一旦deferred.done()返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加.done()方法。当延迟解决，web前端开发

$.get("ajax.asp").done(function() {
//延迟成功
alert("ok");
}).fail(function(){
//延迟失败;
alert("$.get failed!");
});

复制代码

jquery ajax连写方式还有一个二合一的方法.then，.then还可以写多个，后面的.then可以使用前面.then中的结果

$.get("test.asp").then(
function(){
//延迟成功
},
function(){
//延迟失败;
}
);

复制代码

jquery ajax还有一个jQuery.when方法
提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。如果单一延迟传递给jQuery.when ，它是通过这个方法和延迟对象附加的其他方法可访问绑定的回调函数返回的，如defered.then 。
当延迟得到解决或者拒绝，通常的代码创建了原来的延迟，适当的回调将被调用。如下：

//两个全部请求成功才会执行回调此api在jquery api的 “工具”一栏下面有详细介绍

$.when($.ajax("p1.asp"), $.ajax("p2.asp"))
.then(function(){
//两个全部请求成功
}, function(){
//任何一个执行失败
});

复制代码

jquery ajax的一个实战例子，ajax请求服务集中到service.js中
这里把jquery ajax请求写成一个服务，比如service.js中有如下代码：

//每次都要重复的ajax代码和一些数据处理，全局提示都可以写到这里面了，当然这里面不要有业务逻辑，只做些数据处理和部分提示

function myService(){
return {
query: function (data) {
var _data = data||{};
return $.get("test.asp",_data).then(
function(){//延迟成功},
function(){//延迟失败;}
);
},
submit: function (data) {
var _data = data||{};
return $.post("test.asp",_data).then(
function(){},
function(){}
);
}
}
}

复制代码

//当然这里面的代码应该做模块化处理，而不是直接向这样声明一个全局的myService
使用我们的myService，代码如下：

//在某些事件的时候，查询数据
var myService = myService();
myService.query()
.then(function(res){
//成功回调
});
//在某些事件的时候，提交数据
myService.submit({name:"天天ASP",sex:"男"})
.then(function(res){
//成功回调
})

复制代码

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] JQuery Ajax 技术汇总小结

在线客服

官方Q群 天天ASP家园网友互动群 群1: 697497501(新手学习互助群) 群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] JQuery Ajax 技术汇总小结

在线客服

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)