Ajax如何接收form表单和传递json数据
一、Ajax简介
Ajax（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据交换的技术。它可以在页面不刷新的情况下，向服务器发送请求并接收响应，从而实现动态更新页面内容的功能。Ajax可以通过多种方式发送请求和接收响应，其中包括接收form表单和传递json数据。
二、如何接收form表单
接收form表单的方式有两种：一种是使用jQuery的$.ajax()方法，另一种是使用原生的XMLHttpRequest对象。下面分别介绍这两种方式的实现方法。
1. 使用jQuery的$.ajax()方法
使用$.ajax()方法可以方便地发送Ajax请求，并且可以自动将form表单中的数据序列化为一个字符串，然后以POST方式发送到服务器。代码如下：
$(function() {
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'server.php',
data: $(this).serialize(),
success: function(data) {
alert(data);
}
});
});
});
上面的代码中，$(this).serialize()方法会将form表单中的数据序列化为一个字符串，然后作为data参数发送到服务器。服务器返回的响应数据会在success回调函数中处理。
2. 使用XMLHttpRequest对象
使用原生的XMLHttpRequest对象也可以接收form表单数据。代码如下：
var xhr = new XMLHttpRequest();
xhr.open('POST', 'server.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
}
};
xhr.send(new FormData(document.querySelector('form')));
上面的代码中，FormData对象可以将form表单中的数据转换为一个键值对的对象，然后使用send()方法发送到服务器。服务器返回的响应数据会在onreadystatechange回调函数中处理。
三、如何接收Ajax传的json数据
接收Ajax传的json数据也有两种方式：一种是使用jQuery的$.ajax()方法，另一种是使用原生的XMLHttpRequest对象。下面分别介绍这两种方式的实现方法。
1. 使用jQuery的$.ajax()方法
使用$.ajax()方法可以方便地发送Ajax请求，并且可以自动将服务器返回的json数据解析为一个JavaScript对象。代码如下：
$(function() {
$.ajax({
type: 'GET',
url: 'server.php',
dataType: 'json',
success: function(data) {
alert(data.name);
}
});
});
上面的代码中，dataType参数指定了服务器返回的数据类型为json，$.ajax()方法会自动将服务器返回的json数据解析为一个JavaScript对象。服务器返回的响应数据会在success回调函数中处理。
2. 使用XMLHttpRequest对象
使用原生的XMLHttpRequest对象也可以接收Ajax传的json数据。代码如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'server.php', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
alert(data.name);
}
};
xhr.send();
上面的代码中，setRequestHeader()方法可以设置请求头，指定请求的数据类型为json。JSON.parse()方法可以将服务器返回的json数据解析为一个JavaScript对象，然后在onreadystatechange回调函数中处理。
本文介绍了两种接收form表单和传递json数据的方式，分别是使用jQuery的$.ajax()方法和原生的XMLHttpRequest对象。无论使用哪种方式，都可以方便地实现Ajax请求和响应的功能，从而实现动态更新页面内容的效果。
