$.ajax()方法是 jQuery 最底层的 Ajax 实现. 它的结构为:
$.ajax(options)
该方法只有一个参数, 但是这个对象里包含了 $.ajax()方法所需要的请求设置以及回调函数等信息, 参数以 key/value 的形式存在, 所有的参数都是可选的. 常用参数见下表:
1.url
要求为 String 类型的参数,(默认为当前地址)发送请求的页面.
2.type
要求为 String 类型的参数, 请求方式 (post 或 get) 默认为 get. 注意其他 http 请求方法, 例如 put 和 delete 也可以使用, 但仅部分浏览器支持.
3.timeout
要求为 Number 类型的参数, 设置请求超时时间 (毫秒). 此设置将覆盖 $.ajaxSetup() 方法的全局设置.
4.async
要求为 Boolean 类型的参数, 默认设置为 true, 所有请求均为异步请求. 如果需要同步请求, 请将此选项设置为 false. 注意, 同步请求将锁住浏览器, 用户其他操作必须等待请求完成才可以执行.
5.cache
要求为 Boolean 类型的参数, 默认为 true(当 dataType 为 Script 时, 默认为 false), 设置 false 将不会从浏览器缓存中加载请求信息.
6.data
要求为 Object 或 String 类型的参数, 发送到服务器的数据. 如果不是字符串, 将自动转换为字符串格式. get 请求中将附加在 URL 后. 防止这种自动转换, 可以查看 processData 选项. 对象必须为 key/value 格式, 例如 {foo1:"bar1",foo2:"bar2"} 转换为 & foo1=bar1&foo2=bar2. 如果是数组, JQuery 将自动为不同值对应同一个名称. 例如 {foo:["bar1","bar2"]} 转换为 & foo=bar1&foo=bar2.
7.dataType
要求为 String 类型的参数, 预期服务器返回的数据类型. 如果不指定, jQuery 将自动根据 HTTP 包的 mine 信息返回 responseXML 或 responseText, 并作为回调函数参数传递. 可用的类型如下:
xml: 返回 XML 文档, 可用 jQuery 处理.
html: 返回纯文本 HTML 信息; 包含的 script 标签会在插入 DOM 时执行.
script: 返回纯文本 javascript 代码. 不会自动缓存结果, 除非设置了 cache 参数. 注意在远程请求时(不在同一个域下), 所有 post 请求都将转为 get 请求.
json: 返回 JSON 数据.
jsonp:JSON 格式. 使用 JSONP 形式调用函数时, 例如 myurl?callback=?,JQuery 将自动替换后一个 "?" 为正确的函数名, 以执行回调函数.
text: 返回纯文本字符串.
8.beforeSend
要求为 Function 类型的参数, 发送请求前可以修改 XMLHttpRequest 对象的函数, 例如添加自定义 HTTP 头. 在 beforeSend 中如果返回 false 可以取消本次 ajax 请求. XMLHttpRequest 对象是唯一的参数.
- function(XMLHttpRequest){
- this;// 调用本次 ajax 请求时传递的 options 参数
- }
- 9.complete
要求为 Function 类型的参数, 请求完成后调用的回调函数(请求成功或失败均调用). 参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串.
- function(XMLHttpRequest,textStatus){
- this; // 调用本次 ajax 请求时传递的 options 参数
- }
- 10.success
要求为 Function 类型的参数, 请求成功后调用的回调函数, 有两个参数.
(1)由服务器返回, 并根据 dataType 参数进行处理后的数据.
(2)描述状态的字符串.
- function(data,textStatus){
- //data 可能是 xmlDoc,jsonObj,html,text 等
- this; // 调用本次 ajax 请求时传递的 options 参数
- }
- 11.error
要求为 Function 类型的参数, 请求失败时被调用的函数. 该函数有 3 个参数, 即 XMLHttpRequest 对象, 错误信息, 捕获的错误对象(可选).ajax 事件函数如下:
- function(XMLHttpRequest,textStatus,errorThrown){
- // 通常情况下 textStatus 和 errorThrown 只有其中一个包含信息
- this; // 调用本次 ajax 请求时传递的 options 参数
- }
- 12.contentType
要求为 String 类型的参数, 当发送信息至服务器时. 内容编码类型默认为 "application/x-www-form-urlencoded". 该默认值适合大多数应用场合.
13.dataFilter
要求为 Function 类型的参数, 给 Ajax 返回的原始数据进行预处理的函数. 提供 data 和 type 两个参数. data 是 Ajax 返回的原始数据, type 是调用 jQuery.ajax 时提供的 dataTYpe 参数. 函数返回的值将由 jQuery 进一步处理.
- function(data,type){
- // 返回处理后的数据
- return data;
- }
- 14.global
要求为 Boolean 类型的参数, 默认为 true. 表示是否触发全局 ajax 事件. 设置为 false 将不会触发全局 ajax 事件, ajaxStart 和 ajaxStop 可用于控制各种 ajax 事件.
15.ifModified
要求为 Boolean 类型的参数, 默认为 false. 仅在服务器数据改变时获取新数据. 服务器数据改变判断的依据是 Last-Modified 头信息. 默认值是 false, 即忽略头信息.
16.jsonp
要求为 String 类型的参数, 在一个 jsonp 请求中重写回调函数的名字. 该值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分, 例如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器.
17.username
要求为 String 类型的参数, 用于响应 HTTP 访问认证请求的用户.
18.password
要求为 String 类型的参数, 用于响应 HTTP 访问认证请求的密码.
19.processData
要求为 Boolean 类型的参数, 默认为 true. 默认情况下, 发送的数据将被转换为对象 (从技术角度来讲而非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded". 如果要发送 DOM 树信息或者其他不希望转换的信息, 请设置为 false.
20.scriptCharset
要求为 String 类型的参数, 只有当请求时 dataType 为 "jsonp" 或者 "script", 并且 type 是 GET 时才会用于强制修改字符集(charset). 通常在本地和远程的内容编码不同时使用.
案例代码:
- $(function(){
- $('#send').click(function(){
- $.ajax({
- type: "GET",
- url: "test.json",
- data: {username:$("#username").val(), content:$("#content").val()},
- dataType: "json",
- success: function(data){
- $('#resText').empty(); // 清空 resText 里面的所有内容
- var html = '';
- $.each(data, function(commentIndex, comment){
- html += '<p class="comment"><h6>' + comment['username']
- + ':</h6><p class="para"'+ comment['content']
- + '</p></p>';
- });
- $('#resText').html(html);
- }
- });
- });
- });
知识链接:
1,$.each()函数:$.each()函数不同于 jQuery 对象的 each()方法, 它是一个全局函数, 不操作 jQuery 对象. 该函数接收两个参数, 第 1 个参数是一个数组或对象, 第 2 个参数是一个回调函数. 回调函数拥有两个参数: 第 1 个参数为数组的索引或对象的成员, 第 2 个参数为对应的变量或内容.
- $.each(data,function(commentIndex,comment){
- //doSomething;
- })
2,ajaxStart()与 ajaxStop(): 当 Ajax 请求开始时, 会触发 ajaxStart()方法的回调函数. 当 Ajax 请求结束时, 会触发 ajaxStop()方法的回调函数. 这些方法都是全局的方法, 因此无论创建它们的代码位于何处, 只要有 Ajax 请求发生时, 就会触发它们.
有时候页面需要加载一些图片, 可能速度会比较慢, 如果在加载过程中, 不给用户提供一些提示和反馈信息, 很容易让用户误认为按钮单击无用, 使用户对网站失去信息.
此时, 我们就需要为网页添加一个提示信息, 常用的提示信息是 "加载中...", 代码如下:
<p id="loading">加载中...</p>
当 Ajax 请求开始时, 将此元素显示, 用来提示用户 Ajax 请求正在进行; 当 Ajax 请求结束后, 将此元素隐藏. 代码如下:
- $("#loading").ajaxStart(function(){
- $(this).show();
- }).ajaxStop(function(){
- $(this).hide();
- })
来源: https://www.2cto.com/kf/201806/755817.html