如何使用jQuery(serialize和serializeArray)序列化复选框将on和off值更改为布尔值true或false

本文概述

1.包括jQuery扩展
2.复选框为布尔值

在将使用AJAX发送到服务器的数据序列化期间, 你将面临严重的行为, 该行为可能会严重影响你编写的代码量和样式。我们通常从一种形式发送信息, 例如以下形式：

< form id="myForm" action="cheese.php" method="post"> < label> Name< /label> < input type="text" name="name"> < br> < label for="isProgrammer"> Programmer< /label> < input type="checkbox" name="isProgrammer" id="isProgrammer"> < br> < label for="isDesigner"> Designer< /label> < input type="checkbox" name="isDesigner" id="isDesigner"> < br> < label> Male< /label> < input type="radio" name="gender" value="http://www.srcmini.com/male"> < label> Female< /label> < input type="radio" name="gender" value="http://www.srcmini.com/female"> < br> < label> Description< /label> < textarea name="description" cols="30" rows="10"> < /textarea> < /form> < input type="button" id="btn" value="http://www.srcmini.com/Serialize"/> < script> $("#serialize").on("click", function(){var data = http://www.srcmini.com/$("#myForm").serialize(); alert(data); }); $("#serializeArray").on("click", function(){var data = http://www.srcmini.com/$("#myForm").serializeArray(); alert(JSON.stringify(data)); }); < /script>

当用户分别单击每个按钮时, 这可以通过jQuery轻松地使用serialize或serializeArray方法(如脚本标签所示)轻松完成：

如何使用jQuery(serialize和serializeArray)序列化复选框将on和off值更改为布尔值true或false

文章图片
这将分别产生以下输出：

name=Carlos& isProgrammer=on& gender=male& description=This%20is%20me.

并使用serializeArray：

[{"name":"name", "value":"Carlos"}, {"name":"isProgrammer", "value":"on"}, {"name":"gender", "value":"male"}, {"name":"description", "value":"This is me."}]

这使事情变得更加轻松, 因为它不包含空输入的数据, 并且你无需编写额外的代码。问题出在著名的复选框输入中, 当检查字符串值” on” 时, 其序列化设置为值。发生这种情况是因为选中的复选框仅发送其value属性, 但是由于我们在复选框中未定义任何value属性, 因此选中该复选框时, 发送的值将是一个简单的” on” 文本。你可能知道, 未选中的复选框不会以表格的形式发送, 因此浏览器将确定它是否已选中, 并将其值设置为” on” 。
但是, 对于某些开发人员而言, 当它由jQuery.serializeArray序列化并带有JSON字符串并自动转换为PHP /或喜欢的服务器语言数组时, 可能更容易直接处理从jQuery发送的数据。但是, 当我们使用布尔值时, ” on” 值根本没有帮助。相反, 我们想检索一个真实值。
1.包括jQuery扩展满足我们需求的第一步是在项目中添加以下jQuery扩展序列化serialize和serializeArray：

/** * Slightly modified the original script from this website. Instead of setting true and false as strings * it should send a plain Boolean variable. * * @see https://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/ */(function ($) {$.fn.serialize = function (options) {return $.param(this.serializeArray(options)); }; $.fn.serializeArray = function (options) {var o = $.extend({checkboxesAsBools: false}, options || {}); var rselectTextarea = /select|textarea/i; var rinput = /text|hidden|password|search|number/i; return this.map(function () {return this.elements ? $.makeArray(this.elements) : this; }).filter(function () {return this.name & & !this.disabled & & (this.checked|| (o.checkboxesAsBools & & this.type === 'checkbox')|| rselectTextarea.test(this.nodeName)|| rinput.test(this.type)); }).map(function (i, elem) {var val = $(this).val(); return val == null ?null :$.isArray(val) ?$.map(val, function (val, i) {return { name: elem.name, value: val }; }) :{name: elem.name, value: (o.checkboxesAsBools & & this.type === 'checkbox') ?(this.checked ? true : false) :val}; }).get(); }; })(jQuery);

此扩展不会修改jQuery.serialize和jQuery.serializeArray的默认行为。它只是提供了一个新选项, 即checkboxesAsBools, 因此当定义此选项并将其设置为true时, 它将运行扩展的逻辑。
2.复选框为布尔值要将序列化复选框的行为定义为布尔值, 你将需要指定此方法的新选项：

var data = http://www.srcmini.com/$("#myForm").serialize({checkboxesAsBools: true}); console.log(data); // name=Car& isProgrammer=true& isDesigner=false& gender=male& description=qweqwe

或使用serializeArray：

var data = http://www.srcmini.com/$("#myForm").serializeArray({checkboxesAsBools: true}); console.log(data); /*[{"name":"name", "value":"Car"}, {"name":"isProgrammer", "value":true}, {"name":"isDesigner", "value":false}, {"name":"gender", "value":"male"}, {"name":"description", "value":"qweqwe"}]*/

这种方法的优点在于, 方法的默认行为不会受到损害。你将需要指定何时在序列化中将复选框作为布尔值处理。
【如何使用jQuery(serialize和serializeArray)序列化复选框将on和off值更改为布尔值true或false】编码愉快！