Question

我正在使用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;
    });

Answer 1

简单的解决方案：将提交按钮更改为键入=“按钮”而不是“提交”。

Answer 2

如果元素#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

为什么我的ajax脚本重新加载我的页面

2 个答案: