返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现异步提交表单数据
  • 200
分享到

JavaScript实现异步提交表单数据

2024-04-02 19:04:59 200人浏览 泡泡鱼
摘要

本文实例为大家分享了javascript实现异步提交表单数据的具体代码,供大家参考,具体内容如下 效果如下: 首先看一下html代码部分: <div class="co

本文实例为大家分享了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);
        }

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

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

--结束END--

本文标题: JavaScript实现异步提交表单数据

本文链接: https://lsjlt.com/news/126861.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现异步提交表单数据
    本文实例为大家分享了JavaScript实现异步提交表单数据的具体代码,供大家参考,具体内容如下 效果如下: 首先看一下HTML代码部分: <div class="co...
    99+
    2024-04-02
  • JavaScript如何实现异步提交表单数据
    这篇文章将为大家详细讲解有关JavaScript如何实现异步提交表单数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。本文实例为大家分享了JavaScript实现异步提交表单数据的具体代码,供大家参考,具...
    99+
    2023-06-15
  • jQuery如何实现异步提交表单
    这篇文章主要为大家展示了“jQuery如何实现异步提交表单”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现异步提交表单”这篇文章吧。前言:我们...
    99+
    2024-04-02
  • 纯javascript中ajax如何实现php异步提交表单
    这篇文章将为大家详细讲解有关纯javascript中ajax如何实现php异步提交表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。很多时候需要异步提交表单,当表单太多是时候,一个个getElementB...
    99+
    2023-06-08
  • JavaScript实现异步获取表单数据
    本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下 在上一篇文章中讲到了使用JavaScript异步提交表单中的数据,那么今天我们就讲讲...
    99+
    2024-04-02
  • JavaScript如何实现异步获取表单数据
    这篇文章主要介绍JavaScript如何实现异步获取表单数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下在上一篇文章中...
    99+
    2023-06-15
  • 如何使用ajax异步提交表单
    这篇文章主要介绍如何使用ajax异步提交表单,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方式一手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用...
    99+
    2024-04-02
  • 怎么使用Jquery让form表单异步提交
    这篇文章主要介绍了怎么使用Jquery让form表单异步提交的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用Jquery让form表单异步提交文章都会有所收获,下面我们一起来看看吧。1.监听表单提交事件,...
    99+
    2023-06-17
  • AJAX提交表单数据实例介绍
    这篇文章主要讲解了“AJAX提交表单数据实例介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“AJAX提交表单数据实例介绍”吧!本文实例讲述了AJAX提交表...
    99+
    2024-04-02
  • php回车不提交表单和提交表单怎么实现
    这篇“php回车不提交表单和提交表单怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php回车不提交表单和提交表单怎么...
    99+
    2023-07-05
  • form提交表单到数据库
    <!DOCTYPE html><html>    <head>        &...
    99+
    2024-04-02
  • C++怎么实现异步数据交换
    本篇内容介绍了“C++怎么实现异步数据交换”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!异步数据交换,除了阻塞函数 send() 和 rec...
    99+
    2023-07-04
  • AngularJS如何实现表单提交
    这篇文章将为大家详细讲解有关AngularJS如何实现表单提交,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:AngularJS中的数据绑定AngularJS创建...
    99+
    2024-04-02
  • JavaScript如何阻止表单提交
    这篇文章主要介绍JavaScript如何阻止表单提交,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!示例:<body>  <form action...
    99+
    2024-04-02
  • DEDECMS实现自定义表单(模型)分步提交实现思路
    一般的企业会遇到各类用户调查,我此前也用DEDE的自定义表单和模型,完成了一些诸如报名等系统的开发。 现在遇到一个用户需求,即,要求将一个表单(或者模型,以下统称表单)分成多步提交实现,以解决部分问卷内容过多,以减轻用户...
    99+
    2022-06-12
    自定义表单 自定义模型 分步提交
  • CSS中怎么实现提交表单
    CSS中怎么实现提交表单,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。CSS代码:body { padding:50px&...
    99+
    2024-04-02
  • vue动态表单数据如何提交
    Vue动态表单数据可以通过以下步骤来提交:1. 在Vue组件中定义表单数据,可以使用data属性来存储表单数据。2. 使用v-mod...
    99+
    2023-05-29
    vue动态表单 vue
  • jquery请求提交表单数据格式
    在 Web 开发中,表单是一种常见的用户交互方式。而 jQuery 是一款广泛使用的 JavaScript 库,它可以简化前端开发的许多任务。在某些情况下,我们需要使用 jQuery 来异步提交表单数据,以便在不刷新页面的情况下更新页面内容...
    99+
    2023-05-23
  • C++异步数据交换实现方法介绍
    异步数据交换,除了阻塞函数 send() 和 recv() 之外,Boost.MPI 还支持与成员函数 isend() 和 irecv() 的异步数据交换。名称以 i 开头,表示函数...
    99+
    2022-11-21
    C++异步数据交换 C++数据交换
  • jQuery如何实现回车提交表单
    这篇文章主要为大家展示了“jQuery如何实现回车提交表单”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现回车提交表单”这篇文章吧。回车提交表...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作