为什么我卡在这个 AJAX 提交循环中？答案

【问题标题】：Why am I stuck in this AJAX submit loop?为什么我卡在这个 AJAX 提交循环中？
【发布时间】：2010-01-14 19:22:42
【问题描述】：

我正在尝试使用 jQuery 表单插件在更改时动态提交表单。

它确实有效，但是每次用户更改输入值时，它都会执行 .post，运行我的成功“alert()”，然后一遍又一遍地重复，直到我刷新页面以停止循环。代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX Form Test Suite</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script src="_scripts/jquery.form.js"></script>
<script>
    $(document).ready(function() {
    var options = { 
        success:       alertYes // post-submit callback 
    }; 

    // binding to each input's change event 
    $('#mainForm input').change(function() { 

        $(this).parent().ajaxSubmit(options); 

        return false; 
    });

    //success callback function
    function alertYes()  {      
        alert('You did it!'); 
    } 
});
</script>
</head>

<body>
<div id="ajaxMessage">
<h1>This is a suite AJAX form</h1>
<form id="mainForm" action="saveForm.php" method="post">
    <ul class="nolist">
    <li class="label"><label>Name</label></li>
    <li class="input"><input type="text" name="name" value="Eric Roberts" /></li>
    <li class="label"><label>Email</label></li>
    <li class="input"><input type="text" name="email" value="e-rob@tvgods.com" /></li>
    <li class="label"><input type="submit" name="submit" value="DO IT" /></li>
    </ul>
</form>
</div>
</body>
</html>

我做错了什么让它像这样不断循环？我假设它是当 .post 返回时，在警报之后，它再次模糊输入，一遍又一遍地重新提交 ajax 调用，但我不知道它为什么会这样做？

谢谢。

【问题讨论】：

PS 这是我正在使用的表单插件：jquery.malsup.com/form

标签： jquery ajax forms

【解决方案1】：

我相信您的 alert() 调用导致表单的 blur() 事件触发，从而使表单重新提交。

更新

如果您使用的是 Firebug，则可以使用以下 javascript：

console.debug('my message goes here');

向 Firebug 控制台发送消息。我通常将它包装在这样的调用中：

function status(msg)
{
  if(console)
    console.debug('# '+msg);
  }
}

然后在我的 javascript 中调用 status('my message here...') 以发出我需要的任何调试/跟踪消息。通过像我在上面所做的那样将它包装在一个函数中，您可以确保代码在没有定义控制台对象的浏览器（IE 或任何没有安装 Firebug 的浏览器）中运行时仍然可以工作。

【讨论】：

是的，先生，就是这样。我没有意识到 alert() 触发了 blur() 。我不需要警报，只是用它来测试，所以很容易修复。谢谢！

【解决方案2】：

我可以说服您绑定到输入上的.change 事件吗？这可能会解决这个问题，并且您将避免大量不需要的提交。现在，如果有人在表单中加入然后退出（不更改任何内容），它将提交，这是一个毫无意义的提交。 .无论如何，更改可能更接近您想要做的事情。

【讨论】：

谢谢，确实如此。我担心 .change 会在每次更改击键时提交表单，但事实并非如此？
不，那将是 keyup 或 keydown 事件。来自 jQuery 文档：当控件失去输入焦点并且其值在获得焦点后已被修改时，会触发 change 事件。