JavaScript實現異步提交表單數據

Posted on by

本文實例為大傢分享瞭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>
                   </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 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表單中需要提交的數據（字符串）

setRequestHeader語法：

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

控制器方法如下：

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數據";
            return Content(str);
        }

這樣就可以提交表單中的數據啦。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：