提交事件时停止重新加载站点答案

【问题标题】：stop reloading site while submit-event提交事件时停止重新加载站点
【发布时间】：2013-12-29 19:52:53
【问题描述】：

嘿，我有这个在用户点击“提交”时运行的小脚本：

$(document).ready(function(){
  $("form").submit(function(){

    var username = $("#username-field").val();
    if(username) { 
        $.ajax({
            url: 'check.php',
            data: {data: JSON.stringify(username)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if(data.result == 0) {
                    alertify.error( data.error );
                    return false;
                }
            }
        });
    } else { 
        alertify.alert( "You forgot to type username" );
        return false;
    }
  });
});

当我在 username-input-field ... 中输入内容时，脚本“check.php”返回 0，但没有显示 alertify.error。

重新加载页面而不是显示 alertiy.error(data.error)？为什么？我设置了“return false”，所以它不应该被刷新。

但是：如果我在输入字段中没有输入任何内容，则 if 子句将变为 false，这有效：

    } else { 
        alertify.alert( "You forgot to type username" );
        return false;
    }

那么为什么这行得通，但 ajax 示例却不行？

【问题讨论】：

标签： jquery ajax plugins return alert

【解决方案1】：

试试这个 sn-p，应该可以解决你的问题：

$(document).ready(function () {
    $("form").submit(function () {
        var username = $("#username-field").val();
        if (username) {
            $.ajax({
                context:this, //set context here
                url: 'check.php',
                data: {
                    data: JSON.stringify(username)
                },
                type: 'POST',
                dataType: "json",
                success: function (data) {
                    if (data.result == 0) {
                        alertify.error(data.error);
                    }
                    else this.submit(); //submit form using DOM node property (not calling jq handler)
                }
            });
        } else {
            alertify.alert("You forgot to type username");            
        }
        return false;
    });
});

【讨论】：

我现在就是这样做的，会发生什么：脚本返回0，页面没有重新加载但也没有错误消息，为什么？
@user3080627 你想提交 FORM 甚至结果 == 0 ???这不是我阅读您的开放邮政编码的方式
不，当 result==0 时，显示错误消息并且不提交
也许：if ($.trim(data.result) === "0") 如果不是，则发布 console.log(data.result) 的值
好的，你确定调用了成功回调吗？您是否尝试过使用 alert() 而不是这个函数来自己调试它 alertify that nobody known？

【解决方案2】：

您需要在 $.ajax 调用 IIRC 之外返回 false。回调返回和函数的返回值不是一回事。

【讨论】：

【解决方案3】：

将 return false 移到最后，在 if 语句之外。您希望始终返回 false，因此从逻辑上讲，将其放在 if 语句中是没有意义的，因为它不依赖于条件。

$(document).ready(function(){
  $("form").submit(function(){
    var form = this;
    var username = $("#username-field").val();
    if(username) { 
        $.ajax({
            url: 'check.php',
            data: {data: JSON.stringify(username)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if(data.result == 0) {
                    alertify.error( data.error );
                    //return false;
                }
                else {
                    form.submit();
                }
            }
        });
    } else { 
        alertify.alert( "You forgot to type username" );
        //return false;
    }
    return false;
  });
});

它没有按原样工作的原因是，当您在成功回调中返回时，您的页面已经重新加载。成功回调甚至没有被执行。

【讨论】：