本文例項為大家分享了javascript實現非同步獲取表單資料的具體程式碼，供大家參考，具體內容如下

在上一篇文章中講到了使用javaScript非同步提交表單中的資料，那麼今天我們就講講利用JavaScript非同步獲取表單中的資料；話不多說，讓我們接著往下看。

效果圖如下：

點選獲取資料，就可以獲取到如下圖所示的資料。

HTML部分如下：

 <div class="container">
       <form class="form-horizontal" onsubmit="return false;">
           <div class="form-group">
               <label TmQhTbDOX
 
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>
           </TmQhTbDOX
 
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 以及是否非同步處理請求。

一、什麼是同步與非同步？

同步就是指一個程序在執行某個請求的時候，若該請求需要一段時間才能返回資訊，那麼這個程序將會一直等待下去，直到收到返回資訊才繼續執行下去。
非同步是指程序不需要一http://www.cppcns.com直等下去，而是繼續執行下面的操作，不管其他程序的狀態。
當有訊息返回時系統會通知程序進行處理，這樣可以提高執行的效率。

非同步實現：

1、運用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");
                }

三.向伺服器傳送請求

向伺服器傳送請求,async) 規定請求的型別、URL 以及是否非同步處理請求。

控制器方法如下：

public ActionResult getInformation()
        {
            string str = "{\"name\":\"三三\",\"sex\":\"男\",\"address\":\"上海市南城區\"}";
            return Content(str);
        }

總結

以上程式設計客棧就是今天要講的內容，本文僅僅簡單介紹了非同步獲取表單資料的使用。