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

Question

所以我有一个单页网站，仅显示使用用户名和密码的登录信息。 我在提交点击时触发了 $.ajax。

我想要的是它删除登录框并加载页面，该页面将准备好所有内容供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.');
            }

        }

    });
});

});

Answer 1

这是一个很常见的问题。当您绑定(bind)到提交事件时，您实际上能够运行一些逻辑，但除非您停止它，否则该事件将继续传播，并且还将运行正常的提交逻辑，这会导致整个页面刷新。这很容易预防:

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

正如另一个答案中所述，您还可以返回 false;。当使用 jQuery 时，有时这是一个更好的方法，因为它有效地取消了一切。尽管在非 jQuery 解决方案中，它并不能阻止事件冒泡。您可以在此处阅读有关原因的更多详细信息:event.preventDefault() vs. return false