当前位置：首页 > 行业动态 > 正文

Ajax 传递JSON实例代码

admin
行业动态
2025-03-19
3

“

javascript，$.ajax({， url: 'example.com/api',， type: 'POST',， contentType: 'application/json',， data: JSON.stringify({ key: 'value' }),， success: function(response) {， console.log(response);， }，});，

“

使用原生JavaScript的XMLHttpRequest对象

1、创建XMLHttpRequest对象：

在现代浏览器中，可以直接使用new XMLHttpRequest()来创建一个XMLHttpRequest对象。

2、设置请求方法和URL：

使用open()方法设置请求类型（如"GET"或"POST"）和请求的URL。

3、设置请求头：

为了告诉服务器发送的是JSON格式的数据，需要设置Content-Type请求头为application/json。

4、发送请求：

对于GET请求，可以直接调用send()方法，对于POST请求，需要先将数据转换为JSON字符串，然后作为参数传递给send()方法。

Ajax 传递JSON实例代码

5、处理响应：

当请求完成时，会触发onreadystatechange事件，在这个事件的回调函数中，可以检查readyState属性是否为4（表示请求已完成），以及status属性是否为200（表示请求成功），如果条件满足，就可以处理响应数据了。

示例代码如下：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求方法和 URL
xhr.open('POST', 'https://example.com/api/data', true);
// 设置请求头来指定数据格式
xhr.setRequestHeader('Content-Type', 'application/json');
// 定义当请求完成时触发的函数
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
// 将 JavaScript 对象转换为 JSON 字符串，并发送请求
var data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

使用jQuery的Ajax方法

1、引入jQuery库：

在使用jQuery的Ajax方法之前，需要先引入jQuery库，可以通过CDN方式引入，也可以下载jQuery文件并在本地引用。

2、发送Ajax请求：

Ajax 传递JSON实例代码

使用$.ajax()方法发送Ajax请求，该方法接受一个配置对象作为参数，可以设置请求类型、URL、请求头、发送的数据等选项。

3、处理响应：

可以在配置对象的success回调函数中处理成功的响应，在error回调函数中处理错误的响应。

示例代码如下：

// 发送一个 post 请求
$.ajax({
    url: 'https://example.com/api/data', // 请求的 URL 地址
    type: 'POST', // 请求的方法
    contentType: 'application/json', // 设置请求头信息
    data: JSON.stringify({ name: 'John', age: 30 }), // 发送的数据，需要转换为 JSON 字符串
    success: function (res) { // 请求成功后的回调函数
        console.log(res);
    },
    error: function (err) { // 请求失败后的回调函数
        console.error(err);
    }
});

表格对比两种方法

特性	原生JavaScript的XMLHttpRequest对象	jQuery的Ajax方法
优点	兼容性好，所有现代浏览器都支持	语法简洁，易于使用，提供了丰富的配置选项和便捷的回调函数
缺点	语法相对复杂，需要手动设置请求头、处理响应等	依赖于jQuery库，可能会增加页面的加载时间
适用场景	适用于需要精细控制Ajax请求的场景，如处理复杂的HTTP请求头、响应状态码等	适用于快速开发和原型设计，以及对Ajax请求有简单需求的场景