ajax怎么发送json数据格式

使用AJAX发送JSON数据格式的完整指南

在现代Web开发中,AJAX（Asynchronous JavaScript and XML）是实现异步数据交互的核心技术，而JSON（JavaScript Object Notation）因其轻量级、易解析的特性，已成为前后端数据交换的主流格式，本文将详细介绍如何使用AJAX发送JSON数据，包括原生JavaScript实现、jQuery简化方法，以及关键注意事项。

AJAX发送JSON数据的核心流程

通过AJAX发送JSON数据本质上包含三个关键步骤：

1. 创建JSON数据：将需要传递的数据封装为JSON格式字符串；
2. 配置AJAX请求：设置请求方法（通常为POST或PUT）、请求头（Content-Type）、数据等参数；
3. 处理响应结果：在回调函数中解析服务器返回的数据（通常也是JSON格式）。

原生JavaScript实现：XMLHttpRequest对象

原生JavaScript通过XMLHttpRequest（XHR）对象或fetch API发送AJAX请求，以下是两种常见方式：

方法1：使用XMLHttpRequest（XHR）

XMLHttpRequest是较传统的AJAX实现方式,兼容性较好，适合需要支持旧版浏览器的场景。

示例代码：

// 1. 创建JSON数据
const userData = {
    name: "张三",
    age: 25,
    email: "zhangsan@example.com"
};
const jsonData = JSON.stringify(userData); // 将对象转为JSON字符串
// 2. 创建XHR对象
const xhr = new XMLHttpRequest();
// 3. 配置请求
xhr.open("POST", "https://api.example.com/user", true); // true表示异步请求
// 4. 设置请求头：告诉服务器发送的是JSON格式数据
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// 5. 监听请求状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理响应数据（假设返回JSON格式）
        const response = JSON.parse(xhr.responseText);
        console.log("服务器响应：", response);
    } else if (xhr.readyState === 4) {
        // 请求失败
        console.error("请求失败，状态码：", xhr.status);
    }
};
// 6. 发送请求（注意：send方法接收的是字符串，需提前JSON.stringify）
xhr.send(jsonData);

关键说明：

• JSON.stringify()：将JavaScript对象转换为JSON字符串，必须调用，否则xhr.send()会直接发送普通字符串，导致服务器无法正确解析。
• Content-Type：必须设置为application/json，这是服务器识别JSON数据的关键，若遗漏，部分服务器（如Spring Boot）会报415 Unsupported Media Type错误。
• readyState：4表示请求完成，status为200表示请求成功。

方法2：使用fetch API（现代推荐）

fetch是ES6引入的更现代的AJAX API，基于Promise，语法更简洁，且支持更灵活的配置。

示例代码：

// 1. 创建JSON数据
const userData = {
    name: "李四",
    age: 30,
    email: "lisi@example.com"
};
// 2. 发送fetch请求
fetch("https://api.example.com/user", {
    method: "POST", // 请求方法
    headers: {
        "Content-Type": "application/json" // 设置请求头
    },
    body: JSON.stringify(userData) // 将JSON对象转为字符串作为请求体
})
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    return response.json(); // 将响应体解析为JSON对象
})
.then(data => {
    console.log("服务器响应：", data);
})
.catch(error => {
    console.error("请求失败：", error);
});

关键说明：

• fetch的body参数只能是字符串、Blob、FormData等类型，因此必须用JSON.stringify()转换。
• response.json()：将服务器返回的JSON字符串解析为JavaScript对象，该方法本身是一个Promise。
• 错误处理：fetch不会自动返回HTTP错误状态（如404、500），需通过response.ok（状态码200-299）手动判断。

使用jQuery简化AJAX请求

jQuery封装了AJAX操作,语法更简洁，适合快速开发或需要兼容旧版本的项目。

示例代码：

// 1. 创建JSON数据
const userData = {
    name: "王五",
    age: 28,
    email: "wangwu@example.com"
};
// 2. 发送AJAX请求
$.ajax({
    url: "https://api.example.com/user", // 请求地址
    type: "POST", // 请求方法
    contentType: "application/json", // 设置请求头Content-Type
    data: JSON.stringify(userData), // 发送的JSON数据（需转为字符串）
    dataType: "json", // 预期服务器返回的数据类型（自动解析JSON）
    success: function(response) {
        console.log("服务器响应：", response);
    },
    error: function(xhr, status, error) {
        console.error("请求失败：", error);
    }
});

关键说明：

• contentType：jQuery中需明确设置为application/json，否则默认为application/x-www-form-urlencoded（表单格式）。
• data：即使传入的是JavaScript对象，jQuery也不会自动转为JSON字符串，必须手动调用JSON.stringify()。
• success和error：分别用于处理成功和失败的回调，比原生XHR的onreadystatechange更直观。

关键注意事项

数据格式必须匹配

• 发送时：JavaScript对象需通过JSON.stringify()转为字符串，否则服务器无法解析。
• 接收时：服务器返回的JSON数据需通过JSON.parse()（原生）或.json()（fetch）解析为对象，避免直接访问字符串属性导致undefined。

请求头（Content-Type）必设

Content-Type是服务器识别数据格式的“身份证”，发送JSON数据时必须设置为application/json，若使用表单提交（application/x-www-form-urlencoded），服务器需单独处理（如Spring Boot用@RequestBody注解）。

跨域问题（CORS）

当前后端域名、端口或协议不同时，浏览器会因同源策略阻止AJAX请求，解决方法：

• 服务器端设置响应头：Access-Control-Allow-Origin: *（允许所有域名）或指定域名（如https://frontend.com）。
• 复杂请求（如POST+application/json）需先发送OPTIONS预检请求，服务器需返回Access-Control-Allow-Methods和Access-Control-Allow-Headers。

安全性考虑

• 防止XSS攻击：对返回的JSON数据中的特殊字符（如<、>）进行转义，或使用textContent而非innerHTML渲染数据。
• 防止CSRF攻击：在请求头中添加X-CSRF-TOKEN（需服务器生成并下发），或使用同源Cookie验证。

常见问题与解决方案

问题1：服务器接收到的数据为null或解析失败

原因：未调用JSON.stringify()，或Content-Type未设置为application/json。
解决：检查发送数据前是否用JSON.stringify()转换，并确认请求头正确。

问题2：浏览器报错SyntaxError: Unexpected token < in JSON

原因：服务器返回非JSON格式（如HTML错误页面），但前端尝试用JSON.parse()解析。
解决：在解析前判断响应内容类型（如response.headers.get('Content-Type')是否包含application/json）。

问题3：跨域请求被浏览器拦截

原因：服务器未配置CORS响应头。
解决：后端添加Access-Control-Allow-Origin等头信息，或使用代理服务器（如Nginx）转发请求。

AJAX发送JSON数据是Web开发的基础技能,核心在于数据格式转换（JSON.stringify/JSON.parse）、请求头设置（Content-Type）和错误处理，无论是原生XHR、fetch还是jQuery，只要上述关键点，就能灵活实现前后端异步数据交互，在实际开发中，还需结合场景选择合适的方式（如现代项目推荐fetch，旧项目兼容可用jQuery），并注意安全性和跨域问题。