JS form 表单收集 数据 formSerialize
做后台系统的时候通常会用到form表单来做数据采集;每次一个字段一个字段的去收集就会很麻烦,网站也有form.js插件可以进行表单收集,并封装成一个对象,通过ajax方法传到后台;现在介绍一种直觉采集form表单的方式:
1.首先写一段公用的js:
//收集表单数据为一个数组
$.request = function (name) {
var search = location.search.slice();
var arr = search.split("&");
for (var i = ; i < arr.length; i++) {
var ar = arr[i].split("=");
if (ar[] == name) {
if (unescape(ar[]) == 'undefined') {
return "";
} else {
return unescape(ar[]);
}
}
}
return "";
}
$.fn.formSerialize = function (formdate) {
var element = $(this);
if (!!formdate) {
for (var key in formdate) {
var $id = element.find('#' + key);
var value = $.trim(formdate[key]).replace(/ /g, '');
var type = $id.attr('type');
if ($id.hasClass("select2-hidden-accessible")) {
type = "select";
}
switch (type) {
case "checkbox":
if (value == "true") {
$id.attr("checked", 'checked');
} else {
$id.removeAttr("checked");
}
break;
case "select":
$id.val(value).trigger("change");
break;
default:
$id.val(value);
break;
}
};
return false;
}
var postdata = {};
element.find('input,select,textarea').each(function (r) {
var $this = $(this);
var id = $this.attr('id');
var type = $this.attr('type');
switch (type) {
case "checkbox":
postdata[id] = $this.is(":checked");
break;
default:
var value = $this.val() == "" ? " " : $this.val();
if (!$.request("keyValue")) {
value = value.replace(/ /g, '');
}
postdata[id] = value;
break;
}
});
if ($('[name=__RequestVerificationToken]').length > ) {
postdata["__RequestVerificationToken"] = $('[name=__RequestVerificationToken]').val();
}
return postdata;
};
2.使用方法
html代码:
<form id='form1id'>
姓名:<input type='text' id='names' name='names'/><br/>
年龄:<input type='text' id='names' name='names'/>
</form> js代码:
var infoModel = JSON.stringify($("#form1id").formSerialize());//得到手机到的表对象
$.ajax({
type: "Post",
url: "/HRSSC/Resume/" + Act,
data: "{infoModel:" + infoModel + "}",//前面的命名和后台接收参数一直
dataType: "json",
contentType: "application/json",
success: function (result) {console.log(result);} 后台代码:
public ActionResult AddEmp(Empinfo infoModel) //命名和前台ajax传的参数一致
{
//具体业务处理
return view();
}
只要把form表单里面的字段和后台类字段对应,收集起来的对象在后台可以直接使用!
JS form 表单收集 数据 formSerialize的更多相关文章
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- django做form表单的数据验证
我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...
- thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息
form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...
- form表单序列化数据之后,追加额外数据
form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...
- springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据
springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
- 关于form表单提交数据后不跳转页面+ajax接收返回值的处理
1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...
- js——form表单验证
用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...
随机推荐
- 微信公众号API使用总结
官网: https://mp.weixin.qq.com/ API: http://mp.weixin.qq.com/wiki/home/index.html 接口调试工具:h ...
- Arduino控制继电器模块
一.实物图 二.例子代码 每隔5s切换断开 接通状态
- Js正则匹配处理时间
<html> <body> <script type="text/javascript"> //将long 型 转换为 日期格式 年-月-日 h ...
- 团体程序设计天梯赛-练习集-L1-036. A乘以B
L1-036. A乘以B 看我没骗你吧 —— 这是一道你可以在10秒内完成的题:给定两个绝对值不超过100的整数A和B,输出A乘以B的值. 输入格式: 输入在第一行给出两个整数A和B(-100 < ...
- 定位IO瓶颈的方法,iowait低,IO就没有到瓶颈?
通过分析mpstat的iowait和iostat的util%,判断IO瓶颈 IO瓶颈往往是我们可能会忽略的地方(我们常会看top.free.netstat等等,但经常会忽略IO的负载情况),今天给大家 ...
- phpqrcode生成二维码
这篇文章讲解得非常详细: https://www.jb51.net/article/136418.htm 备注一下: 如果遇到生成的二维码是一串乱码.只需要在代码最后加上 exit();即可解决,原理 ...
- 排序算法总结(C++)
算法复杂度 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面. 不稳定:如果a原本在b的前面,而a=b,排序之后 a 可能会出现在 b 的后面. 时间复杂度:对排序数据的总的操作次数.反映 ...
- 自定义UEditor右键菜单
//打开右键菜单功能 ,enableContextMenu: true //右键菜单的内容,label留空支持国际化,否则以此配置为准 //,contextMenu:[ // { // label:' ...
- (30)导入时如何定制spring-boot依赖项的版本【转载】【从零开始学Spring Boot】
此文章转载地址:http://www.tuicool.com/articles/RJJvMj3 请注重作者的版权. spring-boot通过maven的依赖管理为我们写好了很多依赖项及其版本,我们可 ...
- POJ - 3126 - Prime
先上题目 Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9259 Accepted: 5274 D ...