JavaScript实现异步提交表单数据

 更新时间:2021年05月26日 12:03:02   作者:是小叶的呢.  
这篇文章主要为大家详细介绍了JavaScript实现异步提交表单数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果如下:

首先看一下HTML代码部分:

<div class="container">
       <form class="form-horizontal" onsubmit="return false;">
           <div class="form-group">
               <label class="control-label col-md-3">姓名:</label>
               <div class="col-md-4">
                   <input type="type" name="txtname" value=" "  class="form-control" 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" onclick="getVal()">获取表单的值</button>
               <button class="btn btn-primary" onclick="postgetData()">提交数据</button>
               <button class="btn btn-success" onclick="getData()">获取数据</button>
           </div>
       </form>
</div>

JavaScript部分如下:

function postgetData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getDataRequest", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var yy = "name=" + document.getElementById("txtName")
                .value + "&sex=" + document.getElementById("cboSex")
                .value + "&address=" + document.getElementById("txtAddress").value;
            xhr.send(yy);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText;
                    console.log(txt);
                }
            }
        }

xhr.send(data);//data表单中需要提交的数据(字符串)

setRequestHeader语法:

setRequestHeader(header,value):向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
1-5 AJAX - 服务器响应
使用 XMLHttpRequest对象的 responseText或 responseXML 属性获取来自服务器的响应
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
onreadystatechange 事件
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息
下面是 XMLHttpRequest 对象的三个重要的属性:
onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status: 200: “OK” 404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

控制器方法如下:

Request.Form (提交方式为post)

public ActionResult getDataRequest()
        {
            string name = Request.Form["name"];
            string sex = Request.Form["sex"];
            string address = Request.Form["address"];
            string str = name + "&" + sex + "&" + address + "&" + "Request只能接收post数据";
            return Content(str);
        }

这样就可以提交表单中的数据啦。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 让mayfish支持mysqli数据库驱动的实现方法

    让mayfish支持mysqli数据库驱动的实现方法

    mysql 是非持继连接函数而 mysqli 是永远连接函数。也就是说 mysql 每次链接都会打开一个连接的进程而 mysqli 多次运行 mysqli 将使用同一连接进程,从而减少了服务器的开销。
    2010-05-05
  • 在javascript中如何得到中英文混合字符串的长度

    在javascript中如何得到中英文混合字符串的长度

    本文为大家介绍下Javascript中如何得到中英文混合字符串的长度,下面有个不错的教程,感兴趣的朋友可以参考下
    2014-01-01
  • JavaScript数值千分位格式化的两种简单实现方法

    JavaScript数值千分位格式化的两种简单实现方法

    下面小编就为大家带来一篇JavaScript数值千分位格式化的两种简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • uniapp App端使用高德地图超详细步骤

    uniapp App端使用高德地图超详细步骤

    地图现在已经渗入到生活的方方面面,给生活带了极大的编译,那么我们如何才能在项目中引入地图呢?这篇文章主要给大家介绍了关于uniapp App端使用高德地图超详细步骤的相关资料,需要的朋友可以参考下
    2023-11-11
  • Express与NodeJs创建服务器的两种方法

    Express与NodeJs创建服务器的两种方法

    本文主要介绍了NodeJs创建Web服务器;Express创建Web服务器的两种方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 无阻塞加载脚本分析[全]

    无阻塞加载脚本分析[全]

    script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。
    2011-01-01
  • websocket4.0+typescript 实现热更新的方法

    websocket4.0+typescript 实现热更新的方法

    这篇文章主要介绍了websocket4.0+typescript 实现热更新的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript style对象与CurrentStyle对象案例详解

    JavaScript style对象与CurrentStyle对象案例详解

    这篇文章主要介绍了JavaScript style对象与CurrentStyle对象案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JS下载文件|无刷新下载文件示例代码

    JS下载文件|无刷新下载文件示例代码

    JS下载文件的实现在网上可以找到很多教程,不过本文为大家介绍的是无刷新下载文件,貌似更酷一点是吧
    2014-04-04
  • 30个高逼格代码的JavaScript高级单行代码

    30个高逼格代码的JavaScript高级单行代码

    这篇文章中列出了一个系列的 30 个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用,它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式,将它们分为以下5大类:日期、字符串、数字、数组、工具
    2023-08-08

最新评论