JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写。在前后端交互中，JSON 被广泛用于数据的传输和存储。
在 AJAX 前后端交互中，JSON 的使用是非常普遍的。AJAX 是 Asynchronous JavaScript and XML 的缩写，意为异步的 JavaScript 和 XML。它可以实现页面的异步更新，无需刷新整个页面。
- 使用 JavaScript 对象创建 JSON 字符串：
var obj = {name: "John", age: 30, city: "New York"};
var myJSON = JSON.stringify(obj);
console.log(myJSON);
// 输出：{"name":"John","age":30,"city":"New York"}
- 使用 AJAX 发送 JSON 数据：
var xhr = new XMLHttpRequest();
xhr.open("POST", "url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
}
};
var obj = {name: "John", age: 30, city: "New York"};
xhr.send(JSON.stringify(obj));
- 使用 AJAX 接收 JSON 数据：
var xhr = new XMLHttpRequest();
xhr.open("GET", "url", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
}
};
xhr.send();
- 使用 jQuery 发送和接收 JSON 数据：
发送 JSON 数据：
$.ajax({
url: "url",
type: "POST",
contentType: "application/json",
data: JSON.stringify({name: "John", age: 30, city: "New York"}),
success: function (response) {
console.log(response);
}
});
接收 JSON 数据：
$.ajax({
url: "url",
type: "GET",
dataType: "json",
success: function (response) {
console.log(response);
}
});
以上代码展示了如何在前后端交互中使用 JSON 以及 AJAX 的基本使用方法。在实际开发中，还需要考虑错误处理、安全性等问题。