当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的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传递给后台的更多相关文章

  1. koa 基础(十一)koa 中 koa-bodyparser 中间件获取表单提交的数据

    1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...

  2. koa 基础(十)原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  3. 在Express 中获取表单请求体数据

    在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...

  4. 获取表单提交的数据getParameter()方法

    请求对象:request public String getParameter(String name); 通过request的getParameter(String name)方法获取 表单里面的n ...

  5. springmvc后台获取表单提交的数据——@ModelAttribute等方式

    1.通过注解ModelAttribute直接映射表单中的参数到POJO.在from中的action写提交的路径,在input的name写参数的名称. package com.demo.model; p ...

  6. jQuery—获取表单标签的数据值

    获取设置input标签的值 <input class="form-control" type="text" id="username" ...

  7. (五)springmvc之获取表单提交的数据

    8.1:使用Request <form method="post" id="form1" action="<%=request.getCo ...

  8. 在html中如何获取表单提交的数据

    a.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  9. springmvc接受表单多条数据的值

    点击下面链接查看具体内容: http://blog.csdn.net/lutinghuan/article/details/46820023

随机推荐

  1. EntityFramework Core 1.1+ Backing Fields(返回字段)

    前言 通过我发表的博文可知最近一段时间会将持续讲解EntityFramework Core特性,在此之前我提到过Backing Fields,回头翻了翻感觉写的还不够好,于是乎再来讲解一番,也是自己再 ...

  2. AJAX跨域问题解决方法(3)——被调用方解决跨域

    被调用方解决跨域是指在HTTP响应头中增加指定的字段,允许调用方调用 可以在两种地方增加1.apache/nginx(HTTP服务器)2.tomcat(应用服务器) 浏览器如何判断跨域?仔细观察可以发 ...

  3. ubuntu字符界面怎么设置中文显示和中文输入

    在ubuntu的字符登陆界面,中文显示默认是乱码的,而且也不支持中文输入,解决方法有很多, 1)安装zhcon--解决中文显示乱码的问题. sudo apt-get install zhcon 然后c ...

  4. Javascript 基础知识2017-03-17

    JavaScript语法 1.单行注释:// 多行注释:*/ 2.基本数据类型:            int 整数型   (不等于四舍五入,把小数舍去)            string 字符型  ...

  5. java基础学习系列一

    判断语句 1,if条件判断语句 if(){} if(){} else{} if(){}else if(){} else() if判断一共这3张情况.if后面的值是boolen类型 2,switch条件 ...

  6. Dynamics 365 Online-使用Azure Logic App 与 Dynamics 365 集成

    什么是Logic App? Azure Logic App 是微软发布的集成平台的产品,有助于生成,计划和自动完成工作流形式的流程,适合跨企业或组织集成,数据,系统和服务.与此同时,Logic App ...

  7. hibernate的一级和二级缓存

    一级缓存就是Session级别的缓存,close后就没了. 二级缓存就是SessionFactory级别的缓存,全局缓存,要配置其他插件. 什么样的数据适合存放到第二级缓存中? 1.很少被修改的数据 ...

  8. CSS速查列表-2-(text)文本

    CSS的Text属性可以改变页面中 1.文本的颜色(color). 2.字符间距(word-spacing ) 属性可以改变字(单词)之间的标准间隔.其默认值 normal 与设置值为 0 是一样的 ...

  9. web api 安全设计(1)

    环境:后台 ASP.NET Web API ,前端为 html,js(跨域访问) 场景1: 客户端自保管RSA 公钥和密钥,签名为客户端私钥签名,服务端用客户端公钥进行签名验证 场景2: 客户端使用S ...

  10. React Native 轻松集成分享功能(Android 篇)

    关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...