如何使用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="male">
    <label>Female</label>
    <input type="radio" name="gender" value="female">

    <br>
    <label>Description</label>
    <textarea name="description" cols="30" rows="10"></textarea>
</form>

<input type="button" id="btn" value="Serialize"/>

<script>
    $("#serialize").on("click", function(){
        var data = $("#myForm").serialize();
        alert(data);
    });

    $("#serializeArray").on("click", function(){
        var data = $("#myForm").serializeArray();
        alert(JSON.stringify(data));
    });
</script>

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

这将分别产生以下输出：

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 = $("#myForm").serialize({
    checkboxesAsBools: true
});

console.log(data);

// name=Car&isProgrammer=true&isDesigner=false&gender=male&description=qweqwe

或使用serializeArray：

var data = $("#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"
   }
]
*/

这种方法的优点在于, 方法的默认行为不会受到损害。你将需要指定何时在序列化中将复选框作为布尔值处理。

编码愉快！