0

我正在使用 ajax 提交表单。那么我使用的脚本只是为了测试一些纯文本回显的表单processform.php。但是，当我单击提交按钮时，没有任何警报并且页面被重新加载。

这不是return false应该防止它。当我删除 ajax 部分时，一切都很顺利。

我在哪里做错了？

$("#submit").click(function(){
      $("#sidebar .message").show();
      $(".sidebar-content").hide();

      $.ajax({
        type: "POST",
        url: "processform.php",
        data: { name: "John", location: "Boston" }
      }).done(function( msg ) {
        alert( "Data Saved: " + msg );
      });

      return false;
    });
4

2 回答 2

2

简单的解决方案：将提交按钮更改为 type="button" 而不是 "submit"。

于 2013-02-20T19:33:39.130 回答
1

如果元素#submit是一个按钮或带有 的输入type="submit"，它可能会触发一个默认行为，将数据发送到表单操作发生的任何地方。

您可以将类型更改为type="button"不具有提交数据的默认行为的类型，也可以在单击处理程序中使用event.preventDefault()来阻止默认行为。

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

如果您希望在您的 ajax 请求成功时触发警报，您​​可以使用success选项而不是.done().

$("#submit").click(function () {
    $("#sidebar .message").show();
    $(".sidebar-content").hide();

    $.ajax({
        type: "POST",
        url: "processform.php",
        data: {
            name: "John",
            location: "Boston"
        },
        success: function(msg) {
            alert("Data Saved: " + msg);
        },
        error: function() {
            alert("Error occurred");
        }
    });

    return false;
});

jsfiddle

于 2013-02-20T19:32:51.840 回答