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); }
这样就可以提交表单中的数据啦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- js如何操作json字符串
- ExtJs中怎么上传文件
- sqlserver技术文档(sql server2016里面的json功能浅析)
- js项目经验(JS实现扫雷项目总结)
- js中Math对象的用法
- JS文件智能提示另一个JS文件中的成员
- php多维数组怎么转换json(php实现的数组转xml案例分析)
- javascript写游戏脚本(原生JS实现飞机大战小游戏)
- js日期格式化
- python操作json格式(详解python 3.6 安装json 模块simplejson)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- js的replace的用法
- js的异步请求(浅谈JS三座大山之异步和单线程)
- js对日期加减指定天、时、分、秒
- extjs中apply和applyIf的用法
- 肌肉小子陈康, 亚洲巨兽 黄哲勋,哪个才是你的菜(肌肉小子陈康亚洲巨兽)
- 新闻周刊 青岛网红 赵厂长 编段子一箩筐输出快乐,陪父亲十二载勇斗病魔(新闻周刊青岛网红)
- 44岁夏雨演谋女郎爸,大其24岁却看不出,互动不怕袁泉吃醋(44岁夏雨演谋女郎爸)
- 全椒人,你还记得吗 那年,那人,那网,那些我们的青春记忆(全椒人你还记得吗)
- 全椒人在苏州10周年联谊会在苏州举办(全椒人在苏州10周年联谊会在苏州举办)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
热门推荐
- 互联网云服务器需要配置(视频云服务器的配置一般怎么选?)
- 美国云服务器的优点(美国哪个机房的云主机比较稳定?)
- css在ie中怎么显示不正常(IE6和IE7中行内元素后的浮动元素被折行的问题解决)
- 设置mysql字符集语句(MySQL修改字符集的实战教程)
- python编写程序读写数据库(详解js文件通过python访问数据库方法)
- 纯css写三角形(老生常谈 使用 CSS 实现三角形的技巧多种方法)
- docker修改镜像配置文件(Docker配置本地镜像与容器的存储位置)
- sqlserver日期转换(SqlServer 查询时日期格式化语句)
- python numpy数组拼接(Python快速转换numpy数组中Nan和Inf的方法实例说明)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)