数据回填

开发工具与关键技术：  vs       异步数据回填

作者：      周乐献       

撰写时间：   2019      年        5月   28     日

异步即指的是不管其他事件进程的状态，继续执行其他的操作。这样可以不必等上面的操作，节省了很多的时间。

数据回填则是给自己所需要回填数据的input标签一个id，通过这些id提取回填所需要的数据。

<div class="container">

        <form class="form-horizontal" id="myform" οnsubmit="return false;">

            <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">

                    <input class="form-control" type="text" value="" name="txtPhone" id="txtPhone" />

                </div>

            </div>

            <div class="form-group">

                <label class="control-label col-md-3">地址：</label>

                <div class="col-md-4">

                    <textarea class="form-control" name=" txtSite "

id=" txtSite "></textarea>

                </div>

            </div>

            <div class="form-group">

                <button class="btn btn-primary col-md-offset-4 " type="submit" id="huiTian">回填</button>

            </div>

        </form>

</div>

 

 

document.getElementById("huiTian").addEventListener("click", function () {

            var xhr;

所对应的浏览器对象

            if (window.XMLHttpRequest) {

                xhr = new XMLHttpRequest();                          

            } else {

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

            }

提取的方法和获取数据的路径

            xhr.open("get", "/form /Shuju ");

            xhr.send();

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    var data = xhr.responseText;

                    var person = JSON.parse(data);               

                    console.log(person);

                    document.getElementById("txtName").value = person.name;

                    document.getElementById("txtPhone").value = person.phone;

                    document.getElementById("txtSite").value = person.site;

                }

            }

        });

所获取的数据

public ActionResult Shuju ()

        {

            string str = "

{ \"name\": \"易云\",\"phone\":\"13596487946\",\" site \":\"金狮大道29号\"}";

            return Content(str);

        }