JS form 表單收集 數據 formSerialize

做后台系統的時候通常會用到form表單來做數據采集；每次一個字段一個字段的去收集就會很麻煩，網站也有form.js插件可以進行表單收集，並封裝成一個對象，通過ajax方法傳到后台；現在介紹一種直覺采集form表單的方式：

1.首先寫一段公用的js：

做后台系統的時候通常會用到form表單來做數據采集；每次一個字段一個字段的去收集就會很麻煩，網站也有form.js插件可以進行表單收集，並封裝成一個對象，通過ajax方法傳到后台；現在介紹一種直覺采集form表單的方式：

1.首先寫一段公用的js：

復制代碼
//收集表單數據為一個數組
$.request = function (name) {
    var search = location.search.slice(1);
    var arr = search.split("&");
    for (var i = 0; i < arr.length; i++) {
        var ar = arr[i].split("=");
        if (ar[0] == name) {
            if (unescape(ar[1]) == 'undefined') {
                return "";
            } else {
                return unescape(ar[1]);
            }
        }
    }
    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 > 0) {
        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表單里面的字段和后台類字段對應，收集起來的對象在后台可以直接使用！

 

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表單里面的字段和后台類字段對應，收集起來的對象在后台可以直接使用！