JQuery AJAX 自动提交表单答案

【问题标题】：JQuery AJAX auto submit formJQuery AJAX 自动提交表单
【发布时间】：2013-10-21 11:08:17
【问题描述】：

我正在尝试使用 ajax 发布表单并且它工作正常...但是当我尝试自动提交表单时它不起作用... 如果我按下提交按钮.. 它很好.. 但如果我 setInterval("submitform();", 5000); ajax 不起作用（我的意思是它重新加载页面）。

ajax.js

$(document).ready(function(){
    $('#form1').submit(function(){
        $.ajax({
            url : 'inserir.php',
            type : 'POST',
            data : $('form').serialize(),
            success: function(data){
                $('#resultado').html(data);
            }
        });
        return false;
    });
})

form.html

<html>
<head>
    <script type="text/javascript" src="ajax.js" ></script>
</head>
<body>
<form id="form1" method="POST">
    Código: <br />
    <input type="text" name="idVeiculo" id="idVeiculo" value="1"/>
    <br /><br />
    Nome: <br />
    <input type="text" name="nome" id="nome" /><input type="submit">
</form>

<div id="resultado"></div>
 <script type="text/javascript">

    window.onload=function(){
    setInterval("submitform();", 5000);
    }
    function submitform(){ document.getElementById('form1').submit(); }

</script>
</body>
</html>

所以如果我按下按钮，它工作正常... 如果我使用该自动提交功能，重新加载页面而不是仅仅将数据发布到 php 文件。

感谢您的帮助！！

【问题讨论】：

标签： jquery

【解决方案1】：

来自 MDN

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

从基于 Gecko 的应用程序调用此方法时，不会触发表单的 onsubmit 事件处理程序（例如，onsubmit="return false;"）。一般来说，它不保证被 HTML 用户代理调用。

你应该把ajax调用分离成一个函数，只在超时函数中调用

$(document).ready(function(){
    $('#form1').submit(ajax);
})
function ajax(){
        $.ajax({
            url : 'inserir.php',
            type : 'POST',
            data : $('form').serialize(),
            success: function(data){
                $('#resultado').html(data);
            }
        });
        return false;
}
...
window.onload=function(){
    setInterval(ajax, 5000);
}

【讨论】：