本文将介绍如何通过Ajax传输JSON数据并将其获取。

在前端开发中，使用Ajax传输JSON数据非常常见。假设我们有一个简单的例子，用户填写了一个表单，表单中包含用户名和年龄，我们需要将这些数据通过Ajax传输到后端，并将返回的JSON数据显示在页面上。

<form id="myForm"><input type="text" id="username" name="username"><input type="text" id="age" name="age"><button type="submit">提交</button></form>

在上述代码中，我们首先获取了表单中的用户名和年龄，然后创建了一个包含这些数据的JavaScript对象（data）。接下来，我们使用XMLHttpRequest对象创建了一个异步请求。在请求发送之前，我们定义了一个onreadystatechange事件处理程序，该处理程序会在收到服务器响应时被调用。

当服务器响应完毕后，我们检查响应的状态码。如果状态码为200，表示请求成功。我们将响应的内容解析为JSON，并将得到的数据添加到页面中。如果状态码不是200，则发生了错误，我们将错误信息打印到控制台中。

假设我们将表单中的用户名填写为Alice，年龄填写为25，并点击提交按钮。后端接收到请求后将返回以下JSON数据：

{
"username": "Alice",
"age": 25
}

我们的前端代码将解析这个JSON数据，并将其展示在页面上。页面上将会显示：

用户名：Alice 年龄：25

通过上述示例，我们可以清楚地看到如何通过Ajax传输JSON数据并将其获取并显示在页面上。