jQuery使用ajax_动力节点Java学院整理

什么是Ajax

Ajax全称为“Asynchronous JavaScript And XML”（异步的 JavaScript 和 XML），是一种无需重新加载整个页面的情况下，能够更新部分页面的通信技术。通过Ajax可以在页面不刷新的情况下，向服务器发送请求并获取响应，使得Web应用程序变得更加迅捷和动态。

jQuery中的Ajax

jQuery是一个JavaScript库，它封装了许多常用的操作，使得操作变得简单并且容易维护。jQuery的ajax()方法是发送Ajax请求的核心方法，使用它能很方便地完成使用Ajax进行服务器交互的操作。

jQuery中ajax()方法的语法

$.ajax({
    type: "请求类型", // GET或POST，默认为GET
    url: "请求的URL地址",
    data: "发送到服务器的数据，可以是字符串、数组或对象",
    dataType: "期望接收到的数据的类型，常用的是json和html"
    success: function(response) { // 请求成功时的回调函数
        // 在这里处理响应结果
    },
    error: function(xhr, status, errorThrown) { // 请求失败时的回调函数
        // 在这里处理错误信息
    }
});

jQuery中ajax()方法的参数说明

type

请求类型。默认为GET，可选值有GET和POST。

url

请求的URL地址。可以是相对地址或绝对地址。如果是相对地址，jQuery会自动将它转换成绝对地址。

data

发送到服务器的数据。可以是字符串、数组或对象。

下面是一些常见的数据类型及其传参的方式：

• 字符串："name=john&age=28"
• 数组：["john", "28"]
• 对象：{name: "john", age: 28}

dataType

期望接收到的数据的类型。常见的有json和html。

如果dataType设置为json，则服务器返回的数据应该是一个JSON字符串，jQuery会自动将其转换为一个JavaScript对象。

如果dataType设置为html，则服务器返回的数据应该是一段HTML代码，jQuery会将其插入到页面中。

success

请求成功时的回调函数。可以在这里处理响应结果。

error

请求失败时的回调函数。可以在这里处理错误信息。

jQuery中ajax()方法的示例

发送POST请求，传递JSON数据

$.ajax({
    type: "POST",
    url: "/api/user/login",
    data: JSON.stringify({
        username: "john",
        password: "123456"
    }),
    dataType: "json",
    success: function(response) {
        // 处理响应结果
    },
    error: function(xhr, status, errorThrown) {
        // 处理错误信息
    }
});

发送GET请求，不带参数

$.ajax({
    type: "GET",
    url: "/api/user/logout",
    success: function(response) {
        // 处理响应结果
    },
    error: function(xhr, status, errorThrown) {
        // 处理错误信息
    }
});

在这个示例中，我们向服务器发送了一个GET请求，不带任何参数。在请求成功后，success回调函数会被调用，我们可以在这里处理服务器返回的数据。如果请求失败，error回调函数会被调用，我们可以在这里处理错误信息。