JavaScript如何实现异步获取表单数据

这篇文章主要介绍javascript如何实现异步获取表单数据，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码，供大家参考，具体内容如下

在上一篇文章中讲到了使用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 以及是否异步处理请求。

一、什么是同步与异步？

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。
当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

异步实现：

运用HTML与CSS来实现页面，表达信息
2、运用XMLHttpRequest和WEB服务器进行数据的异步交换
3、运用JavaScript操作DOM，实现动态局部刷新

二、什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据（具体介绍可见w3c）
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建
XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：

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如何实现异步获取表单数据”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！