以下是一个使用AJAX发送JSON数据并处理服务器响应的简单示例。在这个示例中，我们将使用原生JavaScript的XMLHttpRequest对象。

HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX JSON Example</title>
</head>
<body>

<button onclick="sendJSON()">Send JSON</button>

<script>
function sendJSON() {
    // 创建一个包含JSON数据的对象
    var jsonData = {
        name: "John Doe",
        age: 25,
        city: "Example City"
    };

    // 将JSON数据转换为字符串
    var jsonString = JSON.stringify(jsonData);

    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();

    // 设置请求方法和URL
    xhr.open("POST", "服务器处理JSON数据的URL", true);

    // 设置请求头，指明发送的是JSON数据
    xhr.setRequestHeader("Content-Type", "application/json");

    // 设置处理响应的回调函数
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 处理服务器的响应
            var response = JSON.parse(xhr.responseText);
            console.log(response);
        }
    };

    // 发送JSON数据
    xhr.send(jsonString);
}
</script>

</body>
</html>

在这个例子中，当用户点击"Send JSON"按钮时，sendJSON函数被调用。该函数创建一个包含JSON数据的JavaScript对象，然后使用JSON.stringify方法将其转换为JSON字符串。接着，使用XMLHttpRequest对象发送POST请求，将JSON字符串作为请求体发送到服务器。在服务器端，您需要相应地处理这个JSON数据，并返回适当的响应。

请注意，这只是一个简单的示例，实际应用中可能需要更多的错误处理和安全性考虑。此外，现代的JavaScript框架和库（如React、Vue.js）通常提供更方便的方式来处理AJAX请求和JSON数据。


转载请注明出处：http://www.zyzy.cn/article/detail/4600/Ajax