Question

对于大学作业，我必须创建一个小型电子商务网站。登录后，用户将被重定向到主页。在这个主页中，客户端将从服务器（包含一些要加载的产品）中返回一个JSON对象，以动态生成主页的DOM。

注意：我必须使用AJAX和JSON

我有这个client.js文件：

$(document).ready(function() {

    // AJAX request on submit
    $("#login_form").submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "submit.php",
            data: {
                Email: document.getElementById('login_email').value, // Email in the form
                Password: document.getElementById('login_password').value // // Password in the form
            },
            cache: false,
            success: function(){
                window.location.href = "home.php"; // load the home.php page in the default folder
            }
        });
    });
});

$(document).ready(function() {

    // AJAX request to open a channel between php and client
    function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "queries.php",
            dataType: "json",
            success: function(data){
                var data = JSON.parse(data);
                alert(data); // debug
                showProducts(data);
            });
        });
    });
});

function showProducts(data){
    alert(data);
    // Insert object into the page DOM
}

我不知道为什么，但是如果第二个Ajax请求（在php和客户端之间打开一个通道的AJAX请求）没有被评论，我就无法在登录后访问，而且我没有＆＃39 ; t知道原因，因为代码似乎正确......有什么建议吗？

Answer 1

登录操作后，您需要在响应中设置为cookie令牌

        success: function(response){
            console.log(response)
            // then set to cookie response.token
            window.location.href = "home.php";
        }

将令牌设置为Cookie后，您需要将此令牌发送到下一个ajax请求url: "queries.php",

Answer 2

如果要执行它，需要在括号中包装匿名函数并在末尾添加()：

(function (e) {
    // I don't know why you need this:
    e.preventDefault();
    // etc.
})();

您还应该检查该函数的内容，因为您似乎有太多的右括号，如果将dataType设置为json，则不需要解析返回的值。

最后，我认为这是关于该功能所需的全部内容：

(function () {
    $.ajax({
        type: "GET",
        url: "queries.php",
        dataType: "json",
        success: function(data){
            console.log(data); // debug
            showProducts(data);
        }
    });
})();

或只是：

$.ajax({
    type: "GET",
    url: "queries.php",
    dataType: "json",
    success: function(data){
        console.log(data); // debug
        showProducts(data);
    }
});

直接在页面加载时获取它。

Ajax：两个函数之间的客户端冲突

2 个答案: