近年来，Ajax（Asynchronous JavaScript and XML）技术在Web开发中的应用越来越广泛。Ajax可以在不重新加载整个页面的情况下与服务器进行数据交换，能够提升用户体验。在使用Ajax进行数据交互时，JSON（JavaScript Object Notation）成为了一种常用的数据格式。本文将介绍如何使用Ajax传递JSON数据，并通过举例来说明其使用方法和实际应用。

一种典型的情况是，我们希望通过Ajax将用户在表单中输入的数据提交给服务器，并获取服务器返回的数据进行展示。假设我们有一个简单的登录表单，包含用户名和密码两个输入框。用户在表单中输入信息后，点击提交按钮，表单数据将以JSON格式发送给服务器。以下是使用jQuery库的示例代码：

$('form').submit(function(event) {
// 阻止表单提交的默认行为
event.preventDefault();
// 获取用户名和密码输入框的值
var username = $('#username').val();
var password = $('#password').val();
// 将数据封装为JSON对象
var data = {
username: username,
password: password
};
// 发送Ajax请求
$.ajax({
url: '/login',
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function(response) {
// 处理服务器返回的数据
console.log(response);
// ...
}
});
});

在上述代码中，我们使用了jQuery库提供的ajax函数来发送Ajax请求。首先，我们阻止了表单的默认提交行为，以便自己处理数据交互。接着，我们获取了用户名和密码输入框的值，并将其封装为一个JSON对象。最后，我们通过ajax函数发送POST请求到服务器的/login路由，并携带了封装好的JSON数据。服务器在收到请求后，根据提交的数据进行身份验证，并返回相应的响应数据。在这个例子中，我们将响应数据打印到了控制台上，你可以根据实际需求进行相关处理。

除了向服务器发送数据，通过Ajax传递JSON数据还可以用于获取服务器上的数据进行展示。例如，我们希望在页面上显示一些由服务器动态生成的数据，如最新的新闻列表。以下是一个使用纯JavaScript实现的示例代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析服务器返回的JSON数据
var response = JSON.parse(xhr.responseText);
// 处理数据
console.log(response);
// ...
}
};
xhr.open('GET', '/latest_news', true);
xhr.send();

在这个例子中，我们创建了一个XMLHttpRequest对象，并添加了一个回调函数来处理服务器的响应。该回调函数在readyState为4（即请求已完成）且status为200（即成功）时被触发。我们首先解析服务器返回的JSON数据，并进行相应的数据处理。这样，我们就可以在控制台上打印出最新的新闻列表。需要注意的是，这个示例中使用的是GET请求，你可以根据具体情况选择合适的请求方式。

总的来说，通过Ajax传递JSON数据已成为现代Web开发中的常见需求。通过本文所述的方法和示例，你可以轻松地将JSON数据发送给服务器并处理服务器的响应数据。无论是提交表单数据还是获取服务器上的数据进行展示，Ajax和JSON的结合能够大大提升用户体验，并使Web应用更加灵活和交互性。