获取form表单数据

开发工具与关键技术：VS、MVC
作者：何德润
撰写时间：2019.6.8

当我们提交form表单数据时，我们可以在form表单内使用action 属性来提交表单，也可以使用jQuery插件中的 ajax方式提交，或者使用post提交等等。现在我要实现的功能是首先要判断form表单里面的多个数据，如果数据符合要求，则可以提交，否则不可以提交。
大部分人可能会直接获取form表单中input标签内的数据。即是这样：

var StudentNumber = $("#formExaminee [name=’ StudentNumber ']").val();
var studentName = $("#formExaminee [name=‘StudentName’]").val()
val()方法为jQuery插件封装的一个方法，用于返回或设置被选元素的值。
"#formExaminee“为form表单的id
[name='StudentName’为每个输入框的名称

但是当我们要判断多个条件时，这样的方法会让我们写很多代码。有没有一种方法可以一句代码获取整个form表单数据呢。
下面，我们尝试下利用jQuery插件中的serialize()方法和serializeArray()方法获取整个form表单的数据。
使用serialize()方法获取整个表单的数据，浏览器控制台输出的效果为：

但这个是方法通过序列化表单值，输出的是 URL 编码的文本字符串，不符我们的要求。所以不用这个方法。
使用serializeArray ()方法获取整个表单的数据，浏览器控制台输出的效果为：

这个方法是通过序列化表单值来创建JSON对象数组，输出的是JSON对象数组
但这个方法输出的数据让我们获取其中的某个值时变得很麻烦。所以，我们不妨将它变成对象的形式输出。具体的方法如下：

$.fn.serializeObject = function () {
var ct = this.serializeArray();
var obj = {};
    $.each(ct, function () {
        if (obj[this.name] !== undefined) {
            if (!obj[this.name].push) {
                obj[this.name] = [obj[this.name]];
            }
            obj[this.name].push(this.value || "");
        } else {
            obj[this.name] = this.value || "";
        }
    });
    return obj;
};

在上面的代码中，我封装了一个名为serializeObject的函数，当我们调用它时，直接$(“”). serializeObject()就可以了。
在封装的函数里面，我声明了两个变量，变量obj用于接收循环判断后的值，ct用于获取当前form表单的数据。
each()方法遍历ct里面的数据；if()判断符合条件的数据；push() 方法向数组的末尾添加一个或多个元素，最后返回一个对象形式的数据。
现在我们调用这个方法，在浏览器控制台输出form表单数据。
代码为：

 var us = $("#formUserType").serializeObject();
   console.log(us)

效果图：

当我们要获取里面的值进行某些判断时，我们可以这样写：

if (us.password[0] == us.password[1]) {}
获取里面的某个值：
var UserCoding =us.UserCoding;
  console.log(UserCoding);

效果图：

通过上面这个例子，我们获取form表单里面的数据时只需调用封装好的serializeObject()方法就可以了，不用每次书写同样的代码。