Ajax异步提交表单

Ajax异步提交表单
开发工具与关键技术：VS2015, HTML5, JavaScript
作者：张金荣
撰写时间：2019 年 3月 28 日

先简单介绍一下Ajax异步提交：
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。所谓异步加载页面就是不用在刷新整个页面的前提下异步加载部分网页更新

这是一个异步提交表单实例，
先在控制器写一个方法接收页面层传过来的值，代码如下：

  public ActionResult postPersonInfor(FormCollection Form)
        {
            string name = Form["name"];
            string sex = Form["sex"];
            string address = Form["address"];
            return Content(name + "&" + sex + "&" + address);//Content(string)返回字符串
           //FormCollection用来在controller中获取页面表单元素的数据。它是表单元素的集合，包括<input type="submit" />元素。
        }

Form Collection用来在controller中获取页面表单元素的数据。它是表单元素的集合，包括元素。

然后在HTML写一个表单里面由标签包裹着input 标签里面要有name属性和id，方便下面获取，代码如下

// 事先声明一下因为下面JavaScript要用到Jquery插件，所以这里要引用一下Jquery插件
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
//

 <form id="myForm" class="form-horizontal" "return false">
        <!--表单默认提交方式为get-->
        <div class="form-group">
            <label class="control-label col-md-3">姓名：</label>
            <div class="col-md-4">
                <input class="form-control" type="text" value="" name="txtName" 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" type="submit" id="btnPost">表单提交</button>
            <button class="btn btn-primary " type="submit" id="btnGet">设置值</button>
        </div>
    </form>

Html表单写好后就要写JavaScript代码，先创建一个变量实例化XMLHttpRequest对象，还要判断浏览器是否支持这Ajax

Var xhr = new XMLHttpRequest (); 

第二步就是Ajax向服务器发送请求
Xhr.open(method,url,async) method:请求方法（“Post”/“GET”） URL（请求方法的路径或文件的路径） asyncs:是否异步提交（true/false）,默认true
第三步就是获取表单内容将值转换成Json/string格式 &name="" &sex="" &address=""
向请求添加 HTTP 头。 参数header 规定头的名称 value：规定头的值 发送到服务器 send()
onreadystatechange 事件
onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status: 200: “OK” 404: 未找到页面\

JavaScript 代码以及解释如图所示

 $("#btnPost").click(function () {
            var xhr; // 创建变量
            if (window.XMLHttpRequest) { //判断浏览器是否支持ajax 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
                xhr = new XMLHttpRequest(); //实例化XMLHttpRequest对象，接收表单传过来的值
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP") //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveXObject 对象：
            }
            //Ajax向服务器发送请求  XMLHttpRequest的 open() 是请求服务器吧 open(method,url,async)内有三个参数 
            //method :请求方法GET/POST URL:请求方法或文件的地址 async:是否异步提交false/true
            xhr.open("POST", "/ProjectManage/InviteTendersPlan/postPersonInfor", true);
            var data = "name=" + document.getElementById("txtName").value + "&sex=" + document.getElementById("cboSex").value + "&address=" + document.getElementById("txtAddress").value;
            //获取表单内容将值转换成Json格式 &name="" &sex=""  &address=""
            console.log(data);
            //向请求添加 HTTP 头。 参数header 规定头的名称  value：规定头的值
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //格式如此
            xhr.send(data); //send() 发送到服务器
            xhr.onreadystatechange = function () { //储存函数/名
                if (xhr.readyState == 4 && xhr.status == 200) { // 当 readyState 等于 4 且状态（status）为 200 时，表示响应已就绪：
                    var txt = xhr.responseText; //	获得字符串形式的响应数据。
                    document.write(txt);
                    //console.log(txt);
                }
            }
        })

方法可能纯在一些误点，但流程基本上是这样的