JavaScript异步获取表单数据详解
本文介绍如何利用JavaScript和XMLHttpRequest对象实现异步获取表单数据。通过对比同步与异步处理机制，详细演示了创建XHR对象、兼容IE5/6以及向服务器发送请求的完整代码示例，帮助开发者掌握前端数据交互的核心技术。
JavaScript异步获取表单数据详解
本文分享了一段使用JavaScript异步获取表单数据的完整代码示例，供读者参考学习。
此前文章已讲解过如何异步提交表单，本文将重点阐述如何异步从服务器获取表单数据，详细内容如下。
运行效果如下图所示：
点击“获取数据”按钮后，页面将显示从服务器返回的对应数据。
前端HTML结构代码如下：
<div class="container">
<form class="form-horizontal" onsubmit="return false;">
<div class="form-group">
<label class="control-label col-md-3">姓名：</label>
<div class="col-md-4">
<input type="type" name="txtname" value=" " class="form-control" id="txtName"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">性别：</label>
<div class="col-md-4">
<select class="form-control" name="cboSex" id="cboSex">
<option>--请选择</option>
<option>男</option>
<option>女</option>
</select>
</div>
</div>
<div class=" form-group">
<label class="control-label col-md-3">地址：</label>
<div class="col-md-4">
<textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary col-md-offset-4" onclick="getVal()">获取表单的值</button>
<button class="btn btn-primary" onclick="postgetData()">提交数据</button>
<button class="btn btn-success" onclick="getData()">获取数据</button>
</div>
</form>
</div>核心JavaScript逻辑代码如下：
function getData() {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("microsoft.XMLHTTP");
}
xhr.open("post", "/JQuery/getInformation", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
var txt = xhr.responseText;//获取xhr的返回值
var obj = JSON.parse(txt);//将字符串解析为js对象
document.getElementById("txtName").value = obj.name;
document.getElementById("cboSex").value = obj.sex;
document.getElementById("txtAddress").value = obj.address;
}
}
}向服务器发送请求
向服务器发送请求
实现向服务器发送请求，主要依赖XMLHttpRequest对象的open()和send()方法。其中，open(method, url, async)用于指定请求类型、目标URL以及是否采用异步处理方式。
同步与异步的概念解析
一、同步与异步的概念解析
同步模式下，进程发出请求后需一直等待，直到收到服务器返回信息才继续执行后续代码。异步模式下，进程无需等待，可继续执行其他操作，待服务器返回消息时再由系统通知进程处理，从而显著提升执行效率。
异步实现的核心步骤
异步实现的核心步骤：
1. 使用HTML与CSS构建页面并展示信息； 2. 利用XMLHttpRequest对象与Web服务器进行数据异步交换； 3. 通过JavaScript操作DOM，实现页面的动态局部刷新。
XMLHttpRequest对象详解
二、XMLHttpRequest对象详解
XMLHttpRequest对象用于在后台与服务器交换数据（更多细节可参考W3C标准）。所有现代浏览器（包括IE7及以上版本、Firefox、Chrome、Safari及Opera）均内置支持该对象。创建该对象的语法如下：
var xhr=new XMLHttpRequest();对于老版本的Internet Explorer（如IE5和IE6），需使用ActiveXObject对象：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");为确保兼容所有现代浏览器（含IE5和IE6），代码中需先检查浏览器是否支持XMLHttpRequest对象。若支持则创建XMLHttpRequest实例，否则创建ActiveXObject实例：
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}向服务器发送请求的具体实现
三、向服务器发送请求的具体实现
向服务器发送请求时，同样使用XMLHttpRequest对象的open()和send()方法。open(method, url, async)用于规定请求类型、URL地址以及是否异步处理请求。
后端控制器方法示例如下：
public ActionResult getInformation()
{
string str = "{\"name\":\"三三\",\"sex\":\"男\",\"address\":\"上海市南城区\"}";
return Content(str);
}总结
以上内容简要介绍了使用JavaScript异步获取表单数据的基本用法。
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38