定义和用法
ajax() 方法用于执行 AJAX(异步 HTTP)请求
语法
注意:
- 下面关于ajax 的 async:false/true的作用整理下
async.默认是 true,即为异步方式,
.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发
.
a
j
a
x
执
行
后
,
会
继
续
执
行
a
j
a
x
后
面
的
脚
本
,
直
到
服
务
器
端
返
回
数
据
后
,
触
发
.ajax里的success方法,这时候执行的是两个线程。
async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
下面的表格中列出了可能的名称/值:
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。设置为false将不会从浏览器缓存中加载请求信息。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。 |
context | 为所有 AJAX 相关的回调函数规定 “this” 值。 |
data | 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。要求为String类型的参数。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求 时(不在同一个域下),所有post请求都将转为get请求。json:返回JSON数据。jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个 “?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。 |
url | 要求为String类型的参数,规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
$.each()函数:
$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容
案例代码:
$(function(){
$('#form').click(function(){
$.ajax({
type: "POST",
url: "zm.action",
data: {username:$("#username").val(),
content:$("#content").val()
},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
success成功后返回类型及页面拼接
类型一
类型二
- 关于jsonp使用方法可参考如下
https://wwwblogs/cwp-bg/p/7668840.html
jsonp解决跨域问题 可在后台进行处理
只需在方法加上一句话
response.setHeader(“Access-Control-Allow-Origin”,”*”);
前端解决跨域如下:
关于jQuery AJAX 方法 success()后台传来的4种数据,可参考如下博文
https://blog.csdn/dreamstar613/article/details/61913970
更多推荐
jquery中ajax()参数及其返回值总结
发布评论