Question

我遇到了jQuery serialize（）函数的问题。

在上下文中，我打开一个表单并检查对其所做的更改，因此当表单加载时，我将数据序列化并将其分配给全局变量：

form_data.edit_initial = $('#edit-job-form').serialize();

工作正常。

然后，当我点击按钮离开表单时，它会执行此检查：

var start = form_data.edit_initial;
var end = $('#edit-job-form').serialize();

if (start == end) 
{ 
    // Do button action 
}
else
{ 
    // Open confirm dialogue 
}

反正。 serialize（）函数都有效，但第二个函数将撇号等转换为一系列数字和百分比符号（我可以放心地假设它是撇号的一些代码）。

任何想法为什么？这意味着即使没有进行任何更改，对话框也会打开，并且表示表单已被更改而不保存。

帮助！

以下是一些示例数据。

我正在使用CKEditor实例。

第一个结果的一部分：

&edit_time_digital=60&edit_desc=%3Cp%3E%0D%0A%09They'd+like+the+share+their+site+incase+people+want+to+see+their+entire+collection+of+furnature.%3C%2Fp%3E%0D%0A%3Cp%3E%0D%0A%09The+site+needs+the+following%3A%3C%2Fp%3E%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Home+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Standard+pages%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Galleries+(By+category)%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Contact+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09News+listings%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3Cp%3E%0D%0A%09It+should+be+a+very+simple+generator+build.%3C%2Fp%3E%0D%0A&edit_status=active`

和第二个：

&edit_time_digital=60&edit_desc=%3Cp%3E%0D%0A%09They%26%2339%3Bd+like+the+share+their+site+incase+people+want+to+see+their+entire+collection+of+furnature.%3C%2Fp%3E%0D%0A%3Cp%3E%0D%0A%09The+site+needs+the+following%3A%3C%2Fp%3E%0D%0A%3Cul%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Home+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Standard+pages%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Galleries+(By+category)%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09Contact+page%3C%2Fli%3E%0D%0A%09%3Cli%3E%0D%0A%09%09News+listings%3C%2Fli%3E%0D%0A%3C%2Ful%3E%0D%0A%3Cp%3E%0D%0A%09It+should+be+a+very+simple+generator+build.%3C%2Fp%3E%0D%0A&edit_status=active

Answer 1

正如您在原帖中的评论中所提到的，我假设您正在使用CKEditor并在您的jQuery ready函数中（或在您的文档加载后的某个地方）使用编辑器实例替换textarea。与大多数WYSIWYG编辑一样，CKEditor喜欢重新格式化传递给它的文本，使其成为有效标记，用HTML实体替换特殊字符，将内容包装在段落中等等。这意味着虽然你没有改变任何东西，但是并且重新格式化的内容可能不同。

编辑器实例的初始化被延迟，可能在您序列化表单后发生。即便如此，CKEditor与它所创建的（现在隐藏的）textarea没有很强的联系，你需要调用编辑器的updateElement函数来刷新所有更改。它通常在表单提交时自动执行，这就是您在提交处理程序中获取重新格式化内容的原因。

所以你只需要确保在第一次序列化之前调用updateElement函数，最好的位置是在编辑器加载之后。幸运的是，有一个事件，假设以下HTML标记：

<form id="myForm">
   <textarea name="test" id="myEditor">My random text</textarea>
</form>

jQuery ready函数：

$(function(){
   function SerializeForm(){
      // Make sure we have the reformatted version of the initial content in the textarea
      CKEDITOR.instances.myEditor.updateElement();

      // Save the initial serialization
      form_data.edit_initial = $('#myForm').serialize();
   }

   // You might as well leave it here in case CKEditor fails to load
   form_data.edit_initial = $('#myForm').serialize();

   // Create editor instance    
   CKEDITOR.replace('myEditor');

   // Tap into CKEditor's ready event to serialize the initial form state
   CKEDITOR.instances.myEditor.on("instanceReady", SerializeForm);
});

Answer 2

谢谢！我和CKEditor textarea在很长一段时间里都遇到了问题。如果没有在cakephp中提交，我无法改变价值。

但现在一切正常。我必须在updateElement之前拨打serialize，如下所示：

CKEDITOR.instances.SurveyBody.updateElement();
var formData = $("#surveyForm").serialize();

Answer 3

值是URI编码的，因为“.serialize（）”旨在用于准备传输的HTTP参数。

您可以通过迭代所有<input>元素（以及<select>和<textarea>，如果适用）将所有表单元素的值收集到一个大字符串中。单选按钮有点棘手，但它仍然是一个非常小的努力。

Answer 4

来自jQuery Docs：

.serialize（）方法创建一个文本标准URL编码的字符串符号

这就是为什么你有这些百分比和数字。虽然它应该返回相同的值，无论你多少次调用它，所以我确信你在两次调用之间做了一些事情。

您可以使用其他方法，例如

var form_changed=false;

$('#edit-job-form :input').change(function () {
    form_changed=true;
});

jQuery :input selector

Answer 5

如果一次使用多个CK Editor实例，则可以在序列化表单之前使用更通用的方法：

    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].updateElement();
    };
    var data = $('#my-form').serialize();

CKEditor和jQuery serialize（）问题

5 个答案: