Javascript $.ajax json GET在页面加载后恢复所有jquery

所以我有一个单页的网站，只显示用户名和密码登录。 我在提交点击上有$.ajax fire

我想要的是删除登录框并加载页面，该页面将准备好ajax内容进入的所有内容

$.ajax函数工作，并通过alert（n）进行了测试；我的json数组的编号

发生的情况是，在该框消失并加载页面后，它会返回到登录框

$(document).ready(function() {
$('#launchform').click(function() {
    $.ajax({
        url: 'campaign.json',
        dataType: 'JSON',
        type: 'GET',
        success: function (data) {
            console.log(data);
            var string = JSON.stringify($('form').serializeArray());
            var login = JSON.parse(string);
            var username = login[0].value;
            var password = login[1].value;
            var n = '';
            for (var i = 0; i < data.result.length; i++){
                    if (data.result[i].name == username){
                        if (data.result[i].id == password){
                            var n = i;
                    }
                } 
            }
            if(n!=='') {
                $(".container").remove();
                $("#loginfade").load("test.html");
            } else {
                alert('Invalid Username/Password Combination.');
            }

        }

    });
});

$（文档）.ready（函数（）{
$（“#启动表单”）。单击（函数（）{
$.ajax({
url:'campaign.json'，
数据类型：“JSON”，
键入：“GET”，
成功：功能（数据）{
控制台日志（数据）；
var string=JSON.stringify（$（'form'）.serializeArray（））；
var login=JSON.parse（字符串）；
var username=login[0]。值；
var password=login[1]。值；
var n=''；
对于（变量i=0；i

---

}))

如果您在

元素中执行此操作，那么表单可能在ajax调用后提交并重新加载页面。尝试添加：

return false;

单击事件函数的末尾，以防止表单提交

所以上面的代码看起来像：

$(document).ready(function() {
$('#launchform').click(function() {
    $.ajax({
        url: 'campaign.json',
        dataType: 'JSON',
        type: 'GET',
        success: function (data) {
            console.log(data);
            var string = JSON.stringify($('form').serializeArray());
            var login = JSON.parse(string);
            var username = login[0].value;
            var password = login[1].value;
            var n = '';
            for (var i = 0; i < data.result.length; i++){
                    if (data.result[i].name == username){
                        if (data.result[i].id == password){
                            var n = i;
                    }
                } 
            }
            if(n!=='') {
                $(".container").remove();
                $("#loginfade").load("test.html");
            } else {
                alert('Invalid Username/Password Combination.');
            }

        }

    });

    return false;
});

$（文档）.ready（函数（）{
$（“#启动表单”）。单击（函数（）{
$.ajax({
url:'campaign.json'，
数据类型：“JSON”，
键入：“GET”，
成功：功能（数据）{
控制台日志（数据）；
var string=JSON.stringify（$（'form'）.serializeArray（））；
var login=JSON.parse（字符串）；
var username=login[0]。值；
var password=login[1]。值；
var n=''；
对于（变量i=0；i

这是一个非常常见的问题。当您绑定到提交事件时，您可以有效地运行某些逻辑，但除非您停止它，否则该事件将继续传播，并且还会运行正常的提交逻辑，从而导致整页刷新。这很容易防止：

$(document).ready(function() {
    $('#launchform').on('click', function(e) {
        e.preventDefault(); // Add this
    });
});

---

正如另一个答案中所述，您也可以

返回false；

。在使用jQuery时，这有时是一种更好的方法，因为它可以有效地取消所有内容。尽管在非jQuery解决方案中，它并不能阻止事件冒泡。您可以在此处阅读更多有关原因的详细信息：

您能澄清一下您的意思吗“删除登录框并加载页面，该页面将准备好ajax内容进入的所有内容。”？我不知道这是什么意思。非常感谢！！我最后使用了“return false；”但是关于事件的文档。preventDefault（）太棒了！AJAX回调函数的返回值被忽略。

return false

属于

。click（）

函数，而不是回调函数。