在上一篇文章 AJAX简单使用教程 中,我写了原生 AJAX 的使用,但是编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

有关 AJAX 的介绍可以参考我的上一篇文章 AJAX简单使用教程

jQuery 提供了多种使用 AJAX 的方法,下面就来简单写一下这些方法的使用。

get() 方法

代码:

//  通过get方式请求
$.get("server.php", 'userName=12346',
    function (response , textStatus, jqXHR) {
        console.log(data);  //  在控制台输出请求到的数据
        console.log(typeof(data));  //  在控制台输出数据类型
    },
    "json"  //  设置返回的数据类型
);

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax

下面是参数说明:

参数 说明
url 设置要请求的文件的url地址
data 要发送的数据,数据格式为 参数名=参数值,多条数据之间用&分隔
success 请求成功后要执行的函数,这个函数会返回3条数据,
  • response  请求返回的数据
  • status  请求的状态
  • jqXHR  XMLHttpRequest 对象
dataType 预计服务器返回的数据类型,如果您不确定服务器返回的数据类型,此参数可以省略

下面是可以设置的类型
  • xml
  • html
  • json
  • text
  • script

特别说明:这里的 dataType 参数可以根据设置的参数自动转换返回的数据类型,例如我设置 dateType 参数为 json,jQuery 就会把请求返回的数据自动转换为 JSON 对象,如果我设置为 script,就会自动执行请求返回的JavaScript代码。

post() 方法

代码:

//  使用POST方式请求
$.post("server.php", 'userName=123456',
    function (data, textStatus, jqXHR) {
        console.log(data);  //  在控制台输出数据
    }
);

最简单的发送 post 请求,连请求头都可以不用设置,参数和返回内容和 get 方法是一样的。

getJSON() 方法

代码:

$.getJSON("server.php", 'email=123@gmail.com',
    function (data, textStatus, jqXHR) {
        console.log(data);  //  在控制台输出请求到的JSON数据
        console.log(textStatus);  //  在控制台输出状态
        console.log(typeof(data));  //  在控制台输出数据类型
    }
);

getJSON 方法可以通过 Ajax 异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,也就是说返回的JSON数据可以直接使用,无需手动转换,参数基本和上面的 get 和 post 差不多,但可以直接返回 JSON 数据,所以不需要设置
dataType 参数。

getScript() 方法

代码:

//  请求一个JS文件,并且自动执行请求到的JS代码
$.getScript("getJSON.js", function (script, textStatus, jqXHR) {
    console.log(script);  //  在控制台输出一下请求到的JS代码
});

getScript 可以通过 get 方式从服务器请求 JS 代码,并且可以自动执行请求到的 JS 代码,参数和上面的 getJSON 是一样的,无需设置 dataType

ajax() 方法

代码:

$.ajax({
    type: "get",  //  请求方式 post或get
    url: "server1.php",  //  要请求的url
    data: "data=hello",  //  要发送的数据
    async: true,  //  是否是异步请求,默认为true
    dataType: "text",  //  预计服务器返回的数据类型
    timeout: 3000,  //  请求超时时间 毫秒
    cache: false,  //  是否从浏览器缓存中加载请求信息,默认为true
    global: false,  //  是否触发全局ajax事件
    success: function (data , status) {  //  请求成功时调用的函数
        console.log(data);  //  在控制台输出数据
        console.log(status);  //  在控制台输出状态
    },
    error: function (xhr, error, abnormal) {  //  请求失败时调用的函数
        console.log(error);  //  输出错误信息
    }
});

发送 ajax 请求,这个方法可自定义的参数较多,此方法接收一个 JSON 对象,下面是 JSON 参数说明:

参数名 类型 说明
type string 请求方式,get或post
url string 要请求的url
data string 要发送的数据,格式为 参数名=参数值
async boolean 是否是异步请求,默认为true
dataType string 预计服务器返回的数据类型,jQuery会根据此设置自动转换数据类型

下面是可设置的类型
  • xml
  • json
  • text
  • html
  • script
timeout number 请求超时时间 毫秒
cache boolean 是否从浏览器缓存中加载请求信息,默认为true
global boolean 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件,默认为true
ifModified boolean 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断,默认为false
beforeSend function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头
complete function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串
success function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
error function 请求失败时调用的函数,这个函数有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

上面就是ajax方法的参数,如果没有特殊需要的话不必每个参数都写

ajaxSetup() 方法

代码:

$.ajaxSetup({
    url: "server.php",  //  设置url
    type: "get",  //  请求类型 get或post
    data: "Hello PHP",  //  要发送的数据
    async: true,  //  是否是异步请求
    dataType: "json",  //  预计服务器返回的数据类型
    timeout: 3000,  //  请求超时时间 毫秒
    cache: false,  //  是否从浏览器缓存中加载请求信息,默认为true
    success: function (data , status) {  //  请求成功时的回掉函数
        console.log(data);  //  在控制台输出数据
        console.log(status);
    },
    error: function (xhr, error, abnormal) {
        console.log(error);  //  在控制台输出错误信息
    }
});

$.ajax();  //  设置完成后调用ajax方法就不需要重新设置了

ajaxSetup 方法可以设置 Ajax 请求的一些全局性参数,设置完成后,后面的 Ajax 请求将不需要再添加这些参数,使用 ajax 设置的参数会覆盖 ajaxSetup 设置的参数,这个方法也是需要传入一个 JSON 对象,具体的 JSON 参数可参考上面的 ajax 参数。

ajaxStart() 和 ajaxStop() 方法

代码:

$(document).ajaxStart(function() {  //  ajax请求开始前
    console.log('正在发送请求');
});

$(document).ajaxStop(function() {  //  ajax请求完成后
    console.log('请求完成');
});

//  发送一个get请求
$.get("server.php", 'data=123',
    function (data, textStatus, jqXHR) {
        console.log(data);
    }
);

ajaxStart 方法用来设置 ajax 开始请求前要执行的函数,ajaxStop 方法用来设置 ajax 请求完成后要执行的函数,ajaxStart 方法和 ajaxStop 方法需要绑定在 document 上,只要执行ajax请求就会触发。这两个方法常被用来设置按钮显示的名称或加载动画。

上面就是 jQuery 常用的 ajax 方法,新版 jQuery 已删除的方法这里就没有写了。


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/85/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论

正在加载 Emoji
×