为什么 Jquery 会重置表单值

Question

有什么方法可以防止 Jquery 清除表单值？

我制作了以下 Jquery 脚本，它基本上将表单 POST 数据发送到 php 函数，然后如果 PHP 输出成功则重定向到新页面，否则会显示错误。

   $('#update').click(function(e) {
   e.preventDefault(); 
   $.ajax({
   type: "POST",
   url: 'function.php',
   data: $(this).serialize(),
   success: function(data)
   {
   if (data === 'Success') {
   window.location = 'acc.php';
   }
   else {
   alert('Please try again.');
  }

}

});

});

通过回显一个 php 变量来填充表单值，如下所示：

    <input type="text" name="name" id="name" value="<?php echo $name ?>">

页面加载时一切正常，但是在我通过前端表单更新字段的值并点击提交后，Jquery 删除了字段的所有值，将空白值发送回 php（输入数据库）和在返回成功消息时重定向到新页面。

我删除了 Jquery 并尝试将表单直接发送到 php，它工作正常，所以这绝对是一个 Jquery 问题。

编辑：PHP 变量是从另一个函数中提取的，当该特定页面首次加载时，它们最初会正确显示在字段中。

关于问题可能是什么的任何想法？

Answer 1

您（可能 - 需要查看页面 HTML 才能确定）在错误的元素上调用 .serialize()。

您有一个click 事件处理程序绑定到一个ID 为update 的元素。我猜这是您希望用户单击以发送 AJAX 请求的按钮或链接。在该事件处理函数的上下文中，this 将是您单击的元素，因此调用 $(this).serialize() 将尝试序列化按钮或链接，而不是表单。

您想要的是：

$('#id-of-your-form').serialize()

或者，如果您的页面上只有一个 <form> 元素，您可以使用：

$('form').serialize();

顺便说一句，这似乎是应该由服务器端验证处理的事情（因此它拒绝空白值）。

Answer 2

尝试改变：

data: $(this).serialize(),

到

data: $("#your_form_id").serialize(),

或

$('form').submit(function() {      
  $.ajax({
   type: "POST",
   url: 'function.php',
   data: $(this).serialize(),
   ....
});