快速获取表单多条数据,使用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
随机推荐
- 树莓派centos安装的基本配置
萌新再发一帖,这篇文章呢主要是为大家在树莓派上安装centos以后提供一个问题的解决方案. 首先我呢觉得好奇就在某宝上花了两百来块钱买了一套树莓派,很多人喜欢在树莓派上安装Debian,我呢更青睐用R ...
- Django admin 组件 原理分析与扩展使用 之 sites.py (一)
一 . 前言 Django 提供了admin 组件 为项目提供基本的管理后台功能(对数据表的增删改查). 本篇文章通过 admin源码 简单分析admin 内部原理 ,扩展使用方式,为以后进行定制和自 ...
- shell中的ps3为何物以及select循环
shell中的ps3为何物: author :headsen chen 2017-10-18 13:59:57 PS3作为select语句的shell界面提示符,提示符为PS3的值(赋 ...
- Mycat 分片规则详解--ASCII 取模范围分片
实现方式:该算法与取模范围算法类似,该算法支持数值.符号.字母取模.首先截取长度为 prefixLength 的子串,在对子串中每一个字符的 ASCII 码求和,然后对求和值进行取模运算(sum%pa ...
- 笔记:Maven 项目目录结构
Maven提倡使用一个共同的标准目录结构,使开发人员能在熟悉了一个Maven工程后,对其他的Maven工程也能清晰了解.这样做也省去了很多设置的麻烦,以下的文档介绍是Maven希望的目录结构,并且也是 ...
- 【Python】 hash值计算 hashlib & hmac
hashlib & hmac *不是很清楚能不能把这种hash值取样算法称之为加密,但是似乎好像也是这么说的哈(非科班出身的野路子就是没这种基本知识的) ■ 基本用法 hashlib支持MD5 ...
- PHP源代码加密
加密软件(php_screw) >下载网站:http://sourceforge.net/projects/php-screw/ >描述:php文件通常以文本格式存贮在服务器端, 很容易被 ...
- c++ --> 父类与子类间的继承关系
父类与子类间的继承关系 一.父类与子类 父类与子类的相互转换 1.派生类的对象可以赋给基类,反之不行 2.基类的指针可以指向派生类,反之不行 3.基类的引用可以初始化为派生类的对象,反之不行 4.派生 ...
- wipefs进程
wipefs进程是啥,占用了百分之90多的cpu wipefs进程是啥,占用了百分之90多的cpu,把这个进程干掉了,过了一天又自动启动了,很多朋友应该遇到过类似的问题. wipefs是linux自带 ...
- jmeter常见问题汇总
Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为"聚合报告".今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下, ...