XMLHttpRequest对象的使用

最新推荐文章于 2022-11-14 23:02:45 发布

我，休伯利安舰长

最新推荐文章于 2022-11-14 23:02:45 发布

阅读量87

点赞数

文章标签： json ajax

本文链接：https://blog.csdn.net/weixin_49757916/article/details/117945074

版权

XMLHttpRequest对象的运用

基本的视图代码：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="#" rel="icon" type="image/x-icon" />
    <link href="~/Content/bootstrap-4.5.3-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container mt-5">
        @*onsubmit="return false;" 禁用表单的自动提交方式*@
        <form id="frm" autocomplete="off" @*action="/Main/GetData" method="post"*@ onsubmit="return false;">
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">姓名</label>
                <input class="form-control col-9" type="text" name="name" id="txtName" />
            </div>
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">性别</label>
                <select class="form-control col-9" name="sex" id="cboSex">
                    <option value="0">--请选择--</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">地址</label>
                <textarea class="form-control col-9" name="address" id="txtAddress"></textarea>
            </div>
            <div class="form-group form-row">
                <button type="button" class="btn btn-outline-primary offset-3 mr-2" onclick="getPersonData()" id="btnGetData">从控制器中获取数据</button>
                <button type="button" class="btn btn-outline-success mr-2" onclick="getData()">GET提交</button>
                <button type="button" class="btn btn-outline-success mr-2" onclick="postData1()">POST提交</button>
                <button type="reset" class="btn btn-outline-danger ">Reset重置</button>
            </div>
        </form>
    </div>
    <script src="~/Content/js/jquery-3.2.1.min.js"></script>
    <script src="~/Content/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</body>
</html>

通过XMLHttpRequest对象从控制器中获取person数据

控制器代码：

        public ActionResult PersonData()
        {
            // \ 反斜杠 用于转义
            //  / 斜杠  
            string str = "{\"name\": \"zhangsan\", \"sex\": \"男\", \"address\": \"四川成都\" }";
            return Content(str);
        }

视图主要代码：

<script>
        function getPersonData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open("get", "/Ajax/PersonData", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {          
                    var str = xhr.responseText;                  
                    var person=JSON.parse(str);
                    console.log(person.address);
                    document.getElementById("txtName").value = person.name;
                    document.getElementById("cboSex").value = person.sex;
                    document.getElementById("txtAddress").value = person.address;
                }
            }
        }
    </script>

以上分别就是控制器和视图的代码；

控制器里面的 \ 反斜杠 用于转义 / 斜杠 用于注释或者备注等

视图：

var xhr; 声明变量

xhr.send(); send() 发送

xhr.open(); open() open() 方法

xhr.open("get", "/Ajax/PersonData", true); 同步为 false 异步为true

"/Ajax/PersonData" 地址和方法

xhr.onreadystatechange onreadystatechange 事件

onreadystatechange: 存储函数(或函数名),每当readyState属性改变时,就会调用该函数

var str = xhr.responseText json格式的字符串

var person=JSON.parse(str); 将json格式的字符串转换为js对象