在 preventDefault() 之后 AJAX 提交给 PHP 仍然加载页面答案

【问题标题】：AJAX Submit to PHP still loading page after preventDefault()在 preventDefault() 之后 AJAX 提交给 PHP 仍然加载页面
【发布时间】：2013-11-07 21:35:03
【问题描述】：

我有一个网页，我正在使用 .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")}
        });
    });
});

【问题讨论】：

你需要摆脱submit调用，这是触发重定向行为的原因
警报需要在一个函数中......我通常使用e.preventDefault();。不知道有没有区别。
^^^他说的，用done()会更好。
您的代码有效，问题一定出在其他地方。你包括 jQuery 吗？表单是否动态添加到页面中？
你的评论让我明白了。我有它工作。谢谢！一旦我把

标签： php ajax jquery

【解决方案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。

$(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/

【讨论】：

这到底有什么不同？
它与 OP 的代码有何不同？我在 ajax 调用之后添加了return false。
它仍在服务器上加载 addTask.php，即使返回 false。我看到它在 jsfiddle 中工作，但我的实时版本仍然无法正常工作。和表单上的action标签有关系吗？
他可能只是随机选择了一个答案，问题是他从来没有真正将他的 javascript 包含在它会被执行的地方。
如果您阻止默认表单提交，则操作属性应该无关紧要。但是您也不需要在表单标签中使用它，因为它已经在您的 ajax 调用中。

【解决方案2】：

尽量防止提交按钮的默认设置：

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

【讨论】：

阅读问题，它说 OP 已经尝试过了？或者，至少在表单提交上，这比这更好吗？
什么？这是一个完全不同的功能`````这是选择提交按钮``
这和他尝试的不一样，他也去掉了提交调用
我会考虑从提交处理程序到点击处理程序的功能降级，这将导致他的提交处理程序停止工作，而不会将他的所有提交处理程序代码移动到此事件处理程序中，在这一点我怀疑他会遇到同样的问题，因为真正的问题在其他地方。