jQuery表单序列化有bug，并且不一致

Buggy jQuery form serialize, and inconsistency

本文关键字：不一致 bug 表单 序列化 jQuery      更新时间：2023-09-26

我在提交表单时看到一些奇怪的不一致，并且通过ajax与.serialize()提交表单。下面是一个简单的例子:

<html>
<body>
<form action="somewhere">
<select name="thing">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="subaru" selected="selected">Subaru</option>
</select>
<input type="text" name="name" value="val">
<button type="submit" name="thing" value="save" >Click me</button>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var $ = jQuery;
$('form').on('submit', function(evt) {
    //evt.preventDefault();
    console.log($('form').serialize());
    console.log($('form').clone().serialize());
});
</script>
</body>
</html>

当您第一次进入页面，更改选择框和文本时，您将在网络控制台(浏览器提交)和日志控制台(jQuery序列化)中看到两种方法中输入的文本是相同的，但是jQuery结果缺少thing=save。

此外，当clone()为元素时，serialize()为选择框提供了完全不同的结果-您可以在控制台中看到:

"thing=mercedes&name=edited" jqform.htm:18
"thing=subaru&name=edited" jqform.htm:19

这些是jQuery中常见的bug吗?jQuery是否需要一些表单插件来实现一个表单的精确克隆，应该创建相同的表单值?

这些是jQuery中常见的bug吗?

这是所有记录和正确的行为。您应该阅读文档以确保您实际上正确地使用了该库，而不是假设您在一个流行且经过良好测试的库中发现了如此明显的错误。

Serialize永远不会包含您的<button>。它只包含成功的控件。

clone将不包含选择框的selected属性。来自文档:

注意:出于性能原因，某些表单元素的动态状态(例如，输入textarea的用户数据和对select进行的用户选择)不会复制到克隆元素中。当克隆输入元素时，元素的动态状态(例如，在文本输入中输入的用户数据和在复选框中做出的用户选择)将保留在克隆的元素中。

就像我们的朋友meagar说的克隆将不包括选择框的选定属性。那么，为什么不直接从序列化的形式中获得结果字符串的副本呢?您可以简单地执行以下操作来获得所需的内容:

$('form').on('submit', function(evt) {
    //evt.preventDefault();
    var fm = $(this).serialize();
    var fn = fm;
    console.log(fm);
    console.log(fn);
});
相关文章：