获取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 ()方法获取整个表单的数据,浏览器控制台输出的效果为:
获取form表单数据_第1张图片
这个方法是通过序列化表单值来创建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)

效果图:
获取form表单数据_第2张图片
当我们要获取里面的值进行某些判断时,我们可以这样写:

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

效果图:
在这里插入图片描述
通过上面这个例子,我们获取form表单里面的数据时只需调用封装好的serializeObject()方法就可以了,不用每次书写同样的代码。

你可能感兴趣的:(后端)