jQuery $.ajax()的用法（附带实例）

除了可以使用全局性函数 load()、$.get()、$.post() 实现页面的异步调用和与服务器交互数据外，在 jQuery 中还有一个功能更为强大的最底层方法 $.ajax()。该方法不仅可以方便地实现上述 3 个全局性函数完成的功能，而且可以更多地关注实现过程中的细节。

$.ajax() 的语法格式为：

$.ajax(options);

其中参数 options 为 $.ajax() 方法中的请求设置，语法格式为 key/value，既包含发送请求的参数，又包含服务器响应后回调的数据。

$.ajax() 方法中常用的参数如下表所示。

表：$.ajax() 方法中常用的参数
参数名称	类型	说明
url	String	发送请求的地址（默认为当前页面的地址）。
type	String	数据请求方式（post 方式或 get 方式），默认为 get 方式。
data	String 或 Object	发送到服务器的数据。如果数据不是字符串格式，则自动转换成字符串格式。如果请求方式是 get 方式，则该字符串将附在 URL 后。
dataType	String	服务器返回的数据类型。如果没有指定数据类型，jQuery 将自动根据 HTTP 包 MIME 信息自动判断，服务器返回的数据根据自动判断结果进行解析，传递给回调函数。可用的数据类型如下： html：返回纯文本 HTML 信息，包含的 <script> 标记会在插入页面时被执行。 script：返回纯文本 JavaScript 代码。 text：返回纯文本字符串。 xml：返回可被 jQuery 处理的 XML 文档。 json：返回 JSON 格式的数据。
beforeSend	Function	该函数用于在发送请求前修改 XMLHttpRequest 对象。该函数的参数就是 XMLHttpRequest 对象。由于该函数本身是 jQuery 事件，因此如果函数返回 false，则表示取消本次事件。 function(XMLHttpRequest){ this; // 调用本次AJAX请求传递的options参数 }
complete	Function	请求完成后调用的回调函数。该函数无论数据发送成功或失败都会被调用。该函数有两个参数，一个是 XMLHttpRequest 对象，另一个是用来描述成功请求类型的字符串 textStatus。 function(XMLHttpRequest,textStatus){ this; // 调用本次AJAX请求传递的options参数 }
success	Function	请求成功后调用的回调函数。该函数有两个参数，一个是根据 dataType 参数处理后服务器返回的数据，另一个是用来描述状态的字符串 textStatus。 function(data,textStatus){ // data 可能是 xmlDoc、jsonObj、html、text 等 this; // 调用本次AJAX请求传递的options参数 }
error	Function	请求失败后调用的回调函数。该函数有 3 个参数，第 1 个参数是 XMLHttpRequest 对象，第 2 个参数是出错信息 strError，第 3 个参数是捕捉到的错误对象 strObject。 function(XMLHttpRequest,strError,strObject){ // 通常情况下strError参数和strObject参数只有一个包含信息 this; // 调用本次AJAX请求传递的options参数 }
global	Boolean	是否响应全局事件，默认参数值为 true 表示响应，如果将参数值设置成 false 表示不响应，全局事件 ajaxStart 等将不响应。
timeout	Number	请求超时的时间（ms），该参数的设置将覆盖 $.ajaxSetup() 方法的全局设置。

【实例】使用 $.ajax() 方法请求数据。

$.ajax({
    type: "GET",
    url: "index.php",
    data: {
        username: $("#username").val(),
        content: $("#content").val()
    },
    dataType: "json",
    success: function(data, textStatus) {
        // 显示用户提交的用户名与留言内容
        $("#responseText").html(
            "用户名：" + data.username + "<br/>留言内容：" + data.content
        );
    }
});

jQuery $.ajax()的用法（附带实例）

相关文章