js获取子表单所有数据(JavaScript实现异步提交表单数据)
js获取子表单所有数据
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> </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 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); }
这样就可以提交表单中的数据啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- php生成json信息(php使用json-schema模块实现json校验示例)
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- json的语法
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- 原生js实现轮播图代码(js实现轮播图制作方法)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- js函数声明和函数表达式的区别
- jquery遍历json字符串
- 禁止鼠标右键的JS代码
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- js判断变量是否为空
- 华为 联想等46家公司笔试面试题,涉及各行各业,建议收藏(联想等46家公司笔试面试题)
- ()
- ()
- 800壮士拼死拖住30万日军 八佰 的真实历史,誓与阵地共存亡(800壮士拼死拖住30万日军)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
热门推荐
- python中的类和对象的定义和使用(Python类的继承、多态及获取对象信息操作详解)
- 如何检查css 兼容性(CSS浏览器兼容性常见问题总结大全推荐)
- css垂直居中图解(全面总结使用CSS实现水平垂直居中效果的方法)
- dedecms调用内容(DEDECMS文章列表页调用tag的修改方法)
- jquery中find()与filter()的区别
- linuxdhcp服务器分配(Linux实现DHCP服务器的搭建)
- dedecms 操作日志代码修改(dedecms 调用单页栏目内容到首页的方法)
- 面试中常见的问题有哪些
- python 调钉钉接口(python3实现钉钉消息推送的方法示例)
- 虚拟机windows server安装php环境(winxp apache用php建本地虚拟主机的方法)