AJAX如何接收JSON数据示例介绍

使用AJAX获取并处理JSON数据的艺术

在我们开始之前，让我们理解JSON如何表示对象和数组，因为这些基础概念是理解如何使用AJAX返回JSON数据的关键。对象通常使用键值对的形式表示，而数组则是一系列有序的值集合。接下来，让我们通过一个生动的例子来了解如何使用AJAX来接收和处理JSON数据。

假设服务器上的某个函数（例如GetJSON）会返回一个JSON数组。这个数组可能包含新闻文章的信息，如文章ID、标题和内容。这个数据可能看起来像这样：

在服务器端：

```javascript

// 伪代码表示服务器端的JSON生成过程

private void GetJSON() {

// 构建JSON数据字符串

sb.Append("["); // 开始数组

// 添加多个JSON对象到数组中

sb.Append("{\"artId\":\"1\",\"title\":\"...\"}");

sb.Append("{\"artId\":\"2\",\"title\":\"国防大学教授称军队房产整顿与谷俊山案有关\"}");

// ...更多文章数据...

sb.Append("]"); // 结束数组

}

```

在客户端，我们可以使用AJAX来请求这个JSON数据。关键部分是设置`dataType`为`json`，这样当数据到达客户端时，它会自动被转换为JSON对象。接下来是如何处理这个数据的两个示例：

第一种方法：手动JSON字符串：

```javascript

$(".btn").on("click", function () { // 注意：使用.on代替.live，因为.live已被废弃

$.post("JSON.aspx", { action: "GETJSON" }, function (data) {

// 由于返回的是字符串，需要手动成JSON对象

var json = eval("(" + data + ")");

if (typeof json === 'object') {

$(json).each(function (i) {

$("wrap").append("

" + json[i].artId + " " + json[i].title + "
内容" + json[i].content);

});

}

});

});

```

第二种方法：让jQuery自动处理JSON数据：

```javascript

$(".btn").on("click", function () { // 同样使用.on代替.live

$.post("JSON.aspx", { action: "GETJSON" }, function (data) {

// jQuery会自动返回的数据为JSON对象（如果设置了dataType为json）

$(data).each(function (i) {

$("wrap").append(data[i].artId + " " + data[i].title + "
内容" + data[i].content + "
");

});

}, "json"); // 设置dataType为json以确保数据自动为JSON对象

});

```

在第二种方法中，我们直接使用了`data`作为JSON对象进行处理，无需额外的步骤。由于返回的`data`是一个包含多个对象的数组，我们可以遍历这个数组来获取每个对象的属性值并在页面上显示它们。这种方式更加简洁且易于理解。通过这种方式，我们能够轻松地通过AJAX从服务器获取JSON数据并在客户端进行展示和处理。