做后台系统的时候通常会用到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(/&nbsp;/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() == "" ? "&nbsp;" : $this.val();
if (!$.request("keyValue")) {
value = value.replace(/&nbsp;/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的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. django做form表单的数据验证

    我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...

  4. thinkPHP5.0使用form表单提交数据和删除文章,不用TP的提示页面,使用弹出提示信息

    form表单提交数据和删除文章时,TP的默认信息提示页面的看起来不是很好看,想要实现弹窗提示怎么做呢? 前端:可以使用前端的一个知识--iframe,iframe元素会创建包含另外一个文档的内联框架: ...

  5. form表单序列化数据之后,追加额外数据

    form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...

  6. springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  7. 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...

  8. 关于form表单提交数据后不跳转页面+ajax接收返回值的处理

    1.前台的form表单建立,注意action.enctype的内容, 2.通过添加一个隐藏的iframe标签使form的target指向iframe来达到不跳转页面的效果,同时需要在js里获取ifra ...

  9. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

随机推荐

  1. 深圳面试一周记录——.NET(B/S)开发

    个人简单信息:2011年毕业,最高学历大专,最近一份工作在广州:有做架构设计经验,有一年的带团队(10人左右)经验:互联网和行业软件公司都待过. 为免不必要的争论,本文说地址的就不说公司行业,说公司行 ...

  2. Quartz+Topshelf 作业

    小记: 引用Quartz.Topshelf.Topshelf.Quartz 使用方法: http://www.cnblogs.com/mushroom/p/4952461.html http://ww ...

  3. Java_Reflect反射

    类是对象,类是java.lang.Class类的实例对象.There is a class named Class class Foo{} public class ClassDemo{ public ...

  4. kmp板子

    kmp 容易理解板子 详情见知乎 算法思想 对模式串求PMT,但实际上nxt数组是PMT向前移动一位 nxt数组含义:记母串为m[],模式串为p[]; m[i]与p[j]比较失配,需要比较m[i]与p ...

  5. js对比for、forEach、map遍历数组速度

    function a() { var arr = new Array(1000000); for(var i = 0; i < arr.length;i ++) { arr[i] = i; } ...

  6. 认识计算机操作系统(day01)

    一.计算机的框架 什么是操作系统?(汽车) 加油系统 油门 用户跟加油子系统交互的窗口.(接口) 方向系统 方向盘 用户跟方向系统的交互接口. 导航系统 ... 汽车的操作系统有很多的子系统来完成.这 ...

  7. Context、Select(day01)

    Oracle sql: 4天 plsql: 2天 proc: 2天 数据库介绍 1.1 数据库简介 1.1.1 数据管理技术的发展 人工管理阶段:20世纪50年代中期之前 文件管理阶段:20世纪的50 ...

  8. 爬虫写法进阶:普通函数--->函数类--->Scrapy框架

    本文转载自以下网站: 从 Class 类到 Scrapy https://www.makcyun.top/web_scraping_withpython12.html 普通函数爬虫: https:// ...

  9. linux -- 扩容 /home 空间( xfs文件系统分区扩容指定挂载点)

    问题: /home空间容量不够使用,扩容卷组,扩容挂载点 方法: 1. 确认有可用的物理磁盘 fdisk -l -- 查看磁盘信息 df -h -- 查看当前挂载信息 vgs -- 查看当前卷组信息 ...

  10. 今天写了一个简单的新浪新闻RSS操作类库

    今天,有位群友问我如何获新浪新闻列表相关问题,我想,用正则表达式网页中取显然既复杂又不一定准确,现在许多大型网站都有RSS集合,所以我就跟他说用RSS应该好办一些. 一年前我写过一个RSS阅读器,不过 ...