开发工具与关键技术: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()方法就可以了,不用每次书写同样的代码。