怎样使用AJAX异步请求获取表单返回的数据,举个例子
时间: 2023-06-05 15:06:07 浏览: 160
可以通过以下步骤使用AJAX异步请求获取表单返回的数据:
1. 在HTML页面中创建一个表单,并绑定一个提交事件。
2. 在提交事件中阻止表单的默认行为,以便使用AJAX发送异步请求。
3. 使用AJAX发送一个POST请求到后端并传递表单数据。
4. 在后端接收到请求后处理数据并返回给前端。
5. 在前端通过success或者done回调处理返回的数据,例如将数据显示在页面上或者执行其他操作。
举个例子,下面是使用jQuery实现的AJAX异步请求获取表单返回的数据的示例代码:
HTML代码:
```
<form>
<input type="text" name="name" placeholder="请输入名字">
<input type="text" name="age" placeholder="请输入年龄">
<button type="submit">提交</button>
</form>
<div id="result"></div>
```
JS代码:
```
$('form').submit(function(event) {
event.preventDefault(); // 阻止表单的默认提交
// 使用AJAX发送异步请求
$.ajax({
url: 'backend.php', // 后端接口地址
method: 'POST',
data: $(this).serialize() // 将表单数据序列化成字符串传递给后端
}).done(function(data) {
// 处理后端返回的数据
$('#result').html(data);
});
});
```
这样当用户点击提交按钮时,表单数据会被异步提交到后端并返回处理结果,结果会被显示在页面的result div中。