您的位置:首页 > 编程学习 > > 正文

javascript如何获取后台数据(JavaScript实现异步获取表单数据)

更多 时间:2022-01-24 00:23:38 类别:编程学习 浏览量:2576

javascript如何获取后台数据

JavaScript实现异步获取表单数据

本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下

在上一篇文章中讲到了使用JavaScript异步提交表单中的数据,那么今天我们就讲讲利用JavaScript异步获取表单中的数据;话不多说,让我们接着往下看。

效果图如下:

javascript如何获取后台数据(JavaScript实现异步获取表单数据)

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

javascript如何获取后台数据(JavaScript实现异步获取表单数据)

HTML部分如下:

  •  <li class="container">
           <form class="form-horizontal" onsubmit="return false;">
               <li class="form-group">
                   <label class="control-label col-md-3">姓名:</label>
                   <li class="col-md-4">
                       <input type="type" name="txtname" value=" "  class="form-control" id="txtName"/>
                   </li>
               </li>
               <li class="form-group">
                   <label class="control-label col-md-3">性别:</label>
                   <li class="col-md-4">
                       <select class="form-control" name="cboSex" id="cboSex">
                           <option>--请选择</option>
                           <option>男</option>
                           <option>女</option>
                       </select>
                   </li>
               </li>
               <li class=" form-group">
                   <label class="control-label col-md-3">地址:</label>
                   <li class="col-md-4">
                       <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
                   </li>
               </li>
               <li 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>
               </li>
           </form>
    </li>
    
  • 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);
            }
    
  • 总结

    以上就是今天要讲的内容,本文仅仅简单介绍了异步获取表单数据的使用。

    您可能感兴趣