虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时，传递JSON已经成为事实上的标准。这篇文章主要介绍了Ajax 传递JSON实例代码,需要的朋友可以参考下
**Ajax 传递JSON实例代码详解**
在现代Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常见的技术，用于实现页面的局部更新，提高用户体验。尽管其名称中含有XML，但在实际应用中，JSON（JavaScript Object Notation）已经成为数据交换格式的首选，因为它更简洁、易于阅读和编写。本篇文章将详细介绍如何在Ajax中使用JSON进行数据传输。
**1. JSON基础知识**
JSON是一种轻量级的数据交换格式，它的语法结构与JavaScript对象非常相似。一个JSON对象通常由键值对组成，用花括号包围 `{}`，键和值之间用冒号 `:` 分隔，各对键值之间用逗号 `,` 分隔。例如：
```json
{
"name": "John Doe",
"age": 30,
"city": "New York"
}
```
**2. 前端页面构建**
在前端页面中，我们通常会使用JavaScript来处理Ajax请求。以下是一个简单的HTML页面示例，包含了查询和创建员工的表单：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工管理</title>
<style>
/* ...样式省略... */
</style>
</head>
<body>
<!-- 查询部分 -->
<h2>员工查询</h2>
<!-- ...输入框和按钮... -->
<!-- 创建部分 -->
<h2>员工创建</h2>
<form id="postForm">
<!-- ...输入框和下拉框... -->
<button id="save" type="button">保存</button>
</form>
<!-- 结果显示区 -->
<p id="searchResult"></p>
<p id="createResult"></p>
<script>
// ...JavaScript代码省略...
</script>
</body>
</html>
```
**3. JavaScript处理Ajax请求**
在JavaScript中，我们使用`XMLHttpRequest`或`fetch` API来实现Ajax请求。这里以`XMLHttpRequest`为例，展示如何发送GET和POST请求，并处理返回的JSON数据。
**3.1 GET请求示例**
当点击查询按钮时，我们可以获取输入框的值，并附加到URL中，通过GET请求发送到服务器：
```javascript
var oSearch = document.getElementById('search');
oSearch.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
if (data.success) {
document.getElementById('searchResult').innerHTML = data.msg;
} else {
document.getElementById('searchResult').innerHTML = '出现错误：' + data.msg;
}
} else {
alert('发生错误：' + xhr.status);
}
}
};
var url = 'service.php';
url = addURLParam(url, 'number', document.getElementById('keyword').value);
xhr.open('GET', url, true);
xhr.send();
};
```
**3.2 POST请求示例**
对于创建员工的POST请求，我们需要构建JSON对象，然后将其序列化为字符串，作为请求体发送：
```javascript
var oSave = document.getElementById('save');
oSave.onclick = function() {
var formData = {
name: document.getElementsByName('name')[0].value,
number: document.getElementsByName('number')[0].value,
sex: document.getElementsByName('sex')[0].value,
job: document.getElementsByName('job')[0].value
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
if (data.success) {
document.getElementById('createResult').innerHTML = data.msg;
} else {
document.getElementById('createResult').innerHTML = '出现错误：' + data.msg;
}
} else {
alert('发生错误：' + xhr.status);
}
}
};
xhr.open('POST', 'service.php', true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(formData));
};
```
**4. 后端处理**
后端服务器接收到JSON数据后，通常会解析并处理这些数据，然后返回一个同样格式化的JSON响应。这个过程依赖于你使用的编程语言，例如在PHP中，你可以使用`json_decode()`函数解析JSON数据，然后进行业务逻辑处理，最后使用`json_encode()`将结果转换回JSON格式返回。
总结，Ajax与JSON的结合使得前后端数据交互变得更加简单和高效。通过前端页面中的JavaScript处理，我们可以轻松地发送和接收JSON数据，实现页面的动态更新。同时，JSON格式在各种编程语言中的广泛支持，也使得跨平台的数据交换成为可能。
