快捷導(dǎo)航

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

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

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

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

效果如下：

首先看一下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>
                   </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 postgetData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getDataRequest", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var yy = "name=" + document.getElementById("txtName")
                .value + "&sex=" + document.getElementById("cboSex")
                .value + "&address=" + document.getElementById("txtAddress").value;
            xhr.send(yy);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText;
                    console.log(txt);
                }
            }
        }

xhr.send(data);//data表單中需要提交的數(shù)據(jù)（字符串）

setRequestHeader語法：

setRequestHeader(header,value)：向請(qǐng)求添加 HTTP 頭。
header: 規(guī)定頭的名稱
value: 規(guī)定頭的值
1-5 AJAX - 服務(wù)器響應(yīng)
使用 XMLHttpRequest對(duì)象的 responseText或 responseXML 屬性獲取來自服務(wù)器的響應(yīng)
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)。
onreadystatechange 事件
每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息
下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性：
onreadystatechange:存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。
readyState:存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成，且響應(yīng)已就緒
status: 200: “OK” 404: 未找到頁面
在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí)，表示響應(yīng)已就緒：

控制器方法如下：

Request.Form (提交方式為post)

public ActionResult getDataRequest()
        {
            string name = Request.Form["name"];
            string sex = Request.Form["sex"];
            string address = Request.Form["address"];
            string str = name + "&" + sex + "&" + address + "&" + "Request只能接收post數(shù)據(jù)";
            return Content(str);
        }

這樣就可以提交表單中的數(shù)據(jù)啦。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: