本文概述
- 1.包括jQuery扩展
- 2.复选框为布尔值
<
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方法(如脚本标签所示)轻松完成:
文章图片
这将分别产生以下输出:
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】编码愉快!
推荐阅读
- 如何在AWS EC2服务器上部署Node.js应用程序
- 如何创建一个jQuery插件
- 如何使用Node.js中的Website Scraper克隆网站(下载HTML,CSS,JavaScript,字体和图像)
- 如何在Laravel中使用PHP Office创建Excel文件
- 如何为Laravel 5.3创建自定义控制台命令(工匠)
- 如何在Laravel中发送电子邮件(Gmail,Outlook和Zoho)
- QQ输入法自定义图片怎样弄?
- QQ输入法图标点亮办法
- qq输入法怎样改字体?