jQuery ajax()方法

当我们需要从服务器获取数据，而不是刷新整个页面时，jQuery AJAX（异步 JavaScript 和 XML）能够很好的帮助我们实现这一目的。ajax()方法是 jQuery处理异步请求的基石，下面是该方法的完整攻略。

ajax()方法介绍

jQuery的 $.ajax()方法提供了一种简单的方式，可以从服务器请求数据，并通过回调函数处理响应结果。下面是 $.ajax()方法的语法

$.ajax({
    url: [请求的地址],
    type: [请求的方式],
    data: [发送到服务器的数据],
    success: [成功的响应处理函数],
    error: [失败的响应处理函数]
});

其中的url，type，data和success参数都是必需的，而error参数是可选的。下面对这些参数的含义和作用进行详细解释：

• url: 需要请求的地址，可以是绝对地址或者相对于当前页面的相对地址；
• type: 请求的方式，可以是 GET 或者 POST 两种方式，在默认情况下，$.ajax()方法的type参数为 GET；
• data: 发送到服务器的数据，可以是对象、数组或者字符串等数据类型；
• success: 请求成功后的回调函数，其中传入的参数为服务器响应的数据，在回调函数中可以对获取到的数据进行进一步的处理；
• error: 请求失败后的回调函数。如果请求失败，则在这个函数中进行相应的处理。

此外还有以下常用的参数：

• dataType: 指定返回数据的类型，可以是 JSON、XML、HTML、text 或者 script，默认值为 text；
• async: 是否使用异步方式发送请求，默认为true。如果将其设置为false，则在发送请求后，会停止当前线程，直到响应返回。

除此之外，$.ajax()方法还可以通过以下写法调用：

$.get(url, data, success, dataType)
$.post(url, data, success, dataType)

它们分别代表了常用的 HTTP 请求方式：GET 和 POST，其中的参数也遵循 $.ajax()方法的规则。

ajax()方法示例

接下来，我将通过两条示例说明$.ajax()方法的使用方式。

示例一：从服务器获取JSON数据

假设我们需要从服务器获取一个JSON，格式如下：

{
    "name": "jack",
    "age": 20,
    "sex": "male"
}

请按照以下步骤进行操作：

1. 在 HTML 代码中添加一个按钮，并绑定点击事件。

<button id="btn">获取数据</button>

1. 使用$.ajax()方法发送请求，并处理相应的数据。

$('#btn').click(function () {
    $.ajax({
        url: '/data', // 请求地址
        success: function (data) { // 成功的回调函数
            $('#name').text(data.name);
            $('#age').text(data.age);
            $('#sex').text(data.sex);
        }
    });
});

其中，url 参数告诉 $.ajax()方法需要向服务器请求数据的地址；success 参数指定了一个回调函数以处理服务器响应的数据。注意，在成功回调函数中，我们使用 data这个参数来引用获取到的 JSON 数据，并将其渲染到对应的DOM节点上。

示例二：使用POST方式向服务器发送JSON数据

假设我们需要将一个JSON数据发送到服务器，格式如下：

{
    "name": "rose",
    "age": 18,
    "sex": "female"
}

请按照以下步骤进行操作：

1. 在HTML代码中添加一个表单。

<form>
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="text" name="sex">
    <button type="submit">提交</button>
</form>

1. 使用$.ajax()方法发送POST请求，并处理相应的数据。

$('form').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeArray();
    $.ajax({
        url: '/save',
        data: JSON.stringify(data),
        type: 'POST',
        contentType: 'application/json',
        success: function (data) {
            console.log('保存成功');
        },
        error: function (xhr, status, error) {
            console.log('保存失败');
        }
    });
});

其中，serializeArray()方法将表单中的数据序列化为一个数组，然后使用 JSON.stringify()方法将其转换为 JSON 字符串，以便可以使用 data参数将其发送到服务器中。type参数指定了请求的方式，即 POST 方式。

总结

以上就是使用 $.ajax()方法发送异步请求的完整攻略。通过阅读本文，你已经学会了使用 $.ajax()方法从服务器获取 JSON 数据，并使用 POST 方式将 JSON 数据发送到服务器上。当然，在实际项目中，还有更加复杂的应用场景，如文件上传、跨域请求等，需要进一步的学习和掌握。