JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)

更新時(shí)間：2021年05月26日 11:39:10 作者：是小葉的呢.

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

在上一篇文章中講到了使用JavaScript異步提交表單中的數(shù)據(jù)，那么今天我們就講講利用JavaScript異步獲取表單中的數(shù)據(jù)；話(huà)不多說(shuō)，讓我們接著往下看。

效果圖如下：

點(diǎn)擊獲取數(shù)據(jù)，就可以獲取到如下圖所示的數(shù)據(jù)。

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>--請(qǐng)選擇</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()">提交數(shù)據(jù)</button>
               <button class="btn btn-success" onclick="getData()">獲取數(shù)據(jù)</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對(duì)象
                    document.getElementById("txtName").value = obj.name;
                    document.getElementById("cboSex").value = obj.sex;
                    document.getElementById("txtAddress").value = obj.address;
                }
            }
        }

向服務(wù)器發(fā)送請(qǐng)求

向服務(wù)器發(fā)送請(qǐng)求,我們使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法：
open(method,url,async) 規(guī)定請(qǐng)求的類(lèi)型、URL 以及是否異步處理請(qǐng)求。

一、什么是同步與異步？

同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候，若該請(qǐng)求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會(huì)一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去。
異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)。
當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率。

異步實(shí)現(xiàn)：

1、運(yùn)用HTML與CSS來(lái)實(shí)現(xiàn)頁(yè)面，表達(dá)信息
2、運(yùn)用XMLHttpRequest和web服務(wù)器進(jìn)行數(shù)據(jù)的異步交換
3、運(yùn)用JavaScript操作DOM，實(shí)現(xiàn)動(dòng)態(tài)局部刷新

二、什么是 XMLHttpRequest 對(duì)象？

XMLHttpRequest 對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)（具體介紹可見(jiàn)w3c）
創(chuàng)建 XMLHttpRequest 對(duì)象
所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建
XMLHttpRequest 對(duì)象。
創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法：

var xhr=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject 對(duì)象：

var xhr=new ActiveXObject("Microsoft.XMLHTTP");

為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，請(qǐng)檢查瀏覽器是否支持XMLHttpRequest 對(duì)象。如果支持，則創(chuàng)建 XMLHttpRequest 對(duì)象。如果不支持，則創(chuàng)建 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");
                }

三.向服務(wù)器發(fā)送請(qǐng)求

向服務(wù)器發(fā)送請(qǐng)求,我們使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法：
open(method,url,async) 規(guī)定請(qǐng)求的類(lèi)型、URL 以及是否異步處理請(qǐng)求。

控制器方法如下：

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

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了異步獲取表單數(shù)據(jù)的使用。

您可能感興趣的文章: