JavaScript实现异步获取表单数据代码示例

作者:袖梨 2022-06-29

本篇文章小编给大家分享一下JavaScript实现异步获取表单数据代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

效果图如下:

点击获取数据,就可以获取到如下图所示的数据。

HTML部分如下:

 

JavaScript部分如下:

 function getData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getInformation", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText;//获取xhr的返回值
                    var obj = JSON.parse(txt);//将字符串解析为js对象
                    document.getElementById("txtName").value = obj.name;
                    document.getElementById("cboSex").value = obj.sex;
                    document.getElementById("txtAddress").value = obj.address;
                }
            }
        }

向服务器发送请求

向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

一、什么是同步与异步?

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。

异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。

当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

异步实现:

1、运用HTML与CSS来实现页面,表达信息

2、运用XMLHttpRequest和web服务器进行数据的异步交换

3、运用JavaScript操作DOM,实现动态局部刷新

二、什么是 XMLHttpRequest 对象?

XMLHttpRequest 对象用于在后台与服务器交换数据(具体介绍可见w3c)

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建

XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

var xhr=new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject 对象:

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

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject:

var xhr;
     if (window.XMLHttpRequest) {
                  // code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

三.向服务器发送请求

向服务器发送请求,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

控制器方法如下:

public ActionResult getInformation()
        {
            string str = "{"name":"三三","sex":"男","address":"上海市南城区"}";
            return Content(str);
        }

相关文章

精彩推荐