preventDefault（）之后，AJAX提交到PHP仍在加载页面

Question

我有一个网页，我正在使用.ajax将变量发送到php脚本。 php页面正在加载到浏览器中，就像我导航到它一样。 该脚本正确加载了数据，因此我的问题是停止导航并使用户停留在原始页面上。 我表单的代码在这里：

echo "<form method='post' action='addTask.php' id='myform'>\n";
echo "<input name='addtask' id='addtask' maxlength='64'/><br/>\n";
echo "<input type='submit' name='submit' id='submit' value='Add Task'/>\n";
echo "</form>\n";

我的jquery的代码在这里：

    $(function(){
    $('#myform').submit(function(e){
        e.stopPropagation();
        $.ajax({
            url: 'addTask.php',
            type: 'POST',
            data: {},
            success: alert("Success")
            });
        });
    });

我已经尝试过：e.preventDefault（），e.​​stopPropagation（）并返回false。 任何帮助表示赞赏。

        $("#submit").click(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "addtask.php",
            data: { }
        })
        .done(function() {
            alert( "success" );
        })
        .fail(function() {
            alert( "error" );
        });

和

$(function(){
    $('#myform').submit(function(e){
        e.preventDefault();
        $.ajax({
            url: 'addTask.php',
            type: 'POST',
            data: {},
            success: function(){alert("Success")}
        });
    });
});

Answer 1

我成功阻止了表单提交，在ajax调用之后返回false。

$(function () {
    $('#myform').submit(function (e) {
        $.ajax({
            url: 'addTask.php',
            type: 'POST',
            data: {},
            success: alert("Success")
        });
        return false;
    });
});

http://jsfiddle.net/5c3n2/

编辑：

上面的代码演示了return false如何阻止表单提交。 但是，正如gloomy.penguin所提到的， success应该是一种功能。 另外，由于调用不会在jsFiddle上成功complete ，因此我添加了complete 。

$(function () {
    $('#myform').submit(function (e) {
        $.ajax({
            url: 'addTask.php',
            type: 'POST',
            data: {},
            success: function() {alert("Success");},
            complete: function() {alert("Completed");}
        });
        return false;
    });
});

http://jsfiddle.net/5c3n2/2/

Answer 2

尝试阻止默认的“提交”按钮：

$('input#submit').click(function(e){
    e.preventDefault();
    //submit your form
});