Question

我正在使用jquery提交表单，并且在表单提交后似乎无法阻止页面重新加载。

我目前的代码如下：

HTML：

<form class="form-horizontal" method="post" action="#" name="basic_validate" id="basic_validate" />
  <div class="control-group">
    <label class="control-label">Image Path</label>
    <div class="controls">
      <input type="text" name="imagepath" id=imagepath />
    </div>
  </div>
  <div class="form-actions">
    <input type=button value="Send" id="sendemailbtn" class="btn btn-primary" />
  </div>
</form>

jQuery：

$("#sendemailbtn").click(function(e) {
    e.preventDefault();
    $("#basic_validate").submit();

    if ($("#basic_validate").children('.control-group').hasClass('error')) {
        return false;
    } else {
        $.post('send_email.php', $("#basic_validate").serialize(), function(data) {

            // I see output on the server side but never hit this area after the submission,

            console.log(data);
        }, "json");
    }
});

Answer 1

$("#basic_validate").submit();

是你的罪魁祸首。该行提交表单并重新加载页面。

Answer 2

根据submit doc，

[...]我们可以通过调用.preventDefault（）取消提交操作事件对象或从我们的处理程序返回false。

由于.preventDefault()似乎不适合您，请尝试：

$("#basic_validate").submit(function(){

    if ($("#basic_validate").children('.control-group').hasClass('error')) {
        return false;
    }
    else {
        $.post('send_email.php', $("#basic_validate").serialize(), function(data) {

        // I see output on the server side but never hit this area after the submission,

            console.log(data);
        }, "json");                             
    }            
    return false;  //This prevents reloading
});

Answer 3

那是因为.submit()以这种方式工作。如果您想使用AJAX提交表单，那么您希望使用$.post手动发出AJAX请求，而不是.submit()：

$("#sendemailbtn").click(function (e) {
    e.preventDefault();
    if (!$("#basic_validate").children('.control-group').hasClass('error')) {
        $.post('send_email.php', $("#basic_validate").serialize(),
        function(data) {
            console.log(data);
        }, "json");                             
    }    
});

如何使用jquery停止事件传播

3 个答案: