关于javascript：$。ajax json GET在页面加载后恢复所有jquery


$.ajax json GET reverts all jquery after page load

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

我想要的是它删除登录框并加载页面，其中包含准备好让ajax内容进入的所有内容。

$ .ajax函数工作并通过alert(n)进行测试; 我的json数组的数字。

发生的事情是在框消失并且页面加载后，它将恢复到登录框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(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.');
            }

        }

    });
});

});

相关讨论

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

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

如另一个答案所述，你也可以return false;。 在使用jQuery时，这有时是一种更好的方法，因为它可以有效地取消所有内容。 虽然，在非jQuery解决方案中，它并没有阻止事件冒泡。 您可以在此处阅读有关原因的更多详细信息：event.preventDefault()与return false

相关讨论

如果您在

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

1
return false;

到click事件函数的末尾，以防止表单提交。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(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;
});
相关讨论