快速获取表单多条数据,使用ajax传递给后台
当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的serialize()方法获取。
HTML:
<form id="form">
<table>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" value="张三" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male" checked />男
<input type="radio" name="sex" value="female" />女
</td>
</tr>
<tr>
<td>地区</td>
<td>
<select name="area">
<option value="heping" selected>和平区</option>
<option value="nankai">南开区</option>
<option value="xiqing">西青区</option>
<option value="hexi">河西区</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby[]" value="movie" checked />电影
<input type="checkbox" name="hobby[]" value="music" checked/>音乐
<input type="checkbox" name="hobby[]" value="basketball" />篮球
</td>
</tr>
<tr>
<td>个人介绍</td>
<td>
<textarea name="intro">个人介绍一下吧</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="提交" id="submit" />
</td>
</tr>
</table>
</form>
Javascript:
$(function(){
$("#submit").click(function(){
var form=$("#form");
var data=getFormData(form);
$.ajax({
//注意测试一下传输的data数据是js对象还是json对象格式
})
})
// 获取表单数据
function getFormData(form){
var data=form.serialize();
data=decodeURI(data);
//name=张三&sex=male&area=heping&hobby[]=movie&hobby[]=music&intro=个人介绍一下吧
var arr=data.split("&");
//["name=张三", "sex=male", "area=heping", "hobby[]=movie", "hobby[]=music", "intro=个人介绍一下吧"]
var item,key,value,newData={};
for(var i=0;i<arr.length;i++){
item=arr[i].split("=");
key=item[0];
value=item[1];
if(key.indexOf("[]")!=-1){
key=key.replace("[]","");
if(!newData[key]){
newData[key]=[];
}
newData[key].push(value);
}else{
newData[key]=value;
}
}
return newData;
//{name: "张三", sex: "male", area: "heping", hobby: (2) ["movie", "music"], intro: "个人介绍一下吧"}
}
})
快速获取表单多条数据,使用ajax传递给后台的更多相关文章
- koa 基础(十一)koa 中 koa-bodyparser 中间件获取表单提交的数据
1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- 在Express 中获取表单请求体数据
在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...
- 获取表单提交的数据getParameter()方法
请求对象:request public String getParameter(String name); 通过request的getParameter(String name)方法获取 表单里面的n ...
- springmvc后台获取表单提交的数据——@ModelAttribute等方式
1.通过注解ModelAttribute直接映射表单中的参数到POJO.在from中的action写提交的路径,在input的name写参数的名称. package com.demo.model; p ...
- jQuery—获取表单标签的数据值
获取设置input标签的值 <input class="form-control" type="text" id="username" ...
- (五)springmvc之获取表单提交的数据
8.1:使用Request <form method="post" id="form1" action="<%=request.getCo ...
- 在html中如何获取表单提交的数据
a.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
- springmvc接受表单多条数据的值
点击下面链接查看具体内容: http://blog.csdn.net/lutinghuan/article/details/46820023
随机推荐
- maven导入多模块项目
maven导入多模块项目 一.SVN上Maven多模块项目结构 使用eclipse导入SVN上的Maven多模块项目 Maven多模块项目所在SVN目录 二.eclipse通过SVN导入到工作空间 ...
- JS如何判断滚动条是否滚到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...
- java中一个引人深思的匿名内部类
前两天去面试javaweb问到一个问题,在你的项目中有没有用到线程,我特么的一想,这东西不是在c层面的吗,所以说我不了解线程..... 后来回去想啊想啊,我操这特么的不是再问我事物的控制,消息队列的回 ...
- JavaScript -- 知识点汇总
js语法 1. javascript数据类型 JavaScript拥有动态类型.这意味着相同的变量可用作不同的类型:有 字符串,数字, 布尔值, 对象, 数组,Undefined和Null 对象: v ...
- 笔记:Spring Cloud Eureka 高可用注册中心
在微服务架构这样的分布式环境中,我们需要充分考虑发生故障的情况,所以在生产环境中必须对各个组件进行高可用部署,对与微服务和服务注册中心都需要高可用部署,Eureka 高可用实际上就是将自己作为服务向其 ...
- mysql在线修复主从同步
要实现MySQL的主从复制,首先必须打开Master端的binlog记录功能,否则就无法实现.因为整个复制过程实际上就是Slave从aster端获取binlog日志,然后再在Slave上以相同顺序执行 ...
- linux --> fork()详解
fork()详解 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个 ...
- centos安装postgis
step 1 yum localinstall https://download.postgresql.org/pub/repos/yum/9.2/redhat/rhel-7-x86_64/p ...
- Konckout第四个实例:组合类型数据绑定 -- 日期双向绑定显示
<!doctype html> <html > <head> <meta http-equiv="Content-Type" conten ...
- SQL中哪些情况会引起全表扫描
1.模糊查询效率很低:原因:like本身效率就比较低,应该尽量避免查询条件使用like:对于like '%...%'(全模糊)这样的条件,是无法使用索引的,全表扫描自然效率很低:另外,由于匹配算法的关 ...