当我从 jQuery ajax 调用时，为什么 res.sendfile() 不起作用？

如何解决当我从 jQuery ajax 调用时，为什么 res.sendfile() 不起作用？

问题： 第一个 ajax 在 main.js 中正常工作，第二个乍一看正在完成其工作，但我认为某处可能存在错误。单击按钮后，我可以访问 getProducts 方法。 product_list.html 文件应该出现在浏览器屏幕上，但它没有。我在前端或后端都没有收到错误消息。

这是我注意到的： 点击按钮后 -> F12 -> 网络 -> 产品 -> 我可以在这里看到状态代码：200 和 product_list.html 文件内容作为响应.

如果 POST ajax 调用成功并且在我添加的情况下：location.href = "/products";，浏览器将加载 product_list.html 我使用 get ajax 调用，因为我需要在 req 标头中传递 jwt 令牌。（我从下面的代码中删除了 jwt 身份验证部分，因为我将错误范围缩小到 $.ajax() 和 res.sendFile() 关系）

//routes.js

routes.get("/products",ProductController.getProducts);

//ProductController.js

var root = path.join(__dirname,'../../views');
module.exports = {
    getProducts(req,res){
        console.log("getProducts!");                 //I can see in the console
        res.sendFile("product_list.html",{root})   //It doesn't render the html
    },}

//main.js

$("#btn-login").click(function(){
    $.ajax({
        type: 'POST',url: "http://localhost:8000/login",dataType: "json",contentType: "application/json",data: JSON.stringify({
            "username": $("#login-user").val(),"password": $("#login-pwd").val(),}),success: function(data){
            if ($("#login-chkbx").is(':checked')){
                    $.ajax({
                        url: "http://localhost:8000/products",type: 'GET',beforeSend: function (xhr) {
                            xhr.setRequestHeader("user",localStorage.getItem("user"));
                        },});
                }
            }else{
                console.log("CheckBox is not checked");
            }
        }
    });
});

导致问题的原因以及如何解决？

谢谢！

解决方法

文件应该出现在浏览器屏幕上

不，它没有，它不应该。文件应该在成功回调中返回给ajax函数调用：

$.ajax({
    url: "http://localhost:8000/products",type: 'GET',beforeSend: function (xhr) {
        xhr.setRequestHeader("user",localStorage.getItem("user"));
    },success: function (file) {
        // The file is in the "file" variable above.
        // Do whatever you want with it. For example you can replace
        // the current page with the returned file:

        document.body.innerHTML = file;
    }
});

这就是 AJAX 的全部意义 - 一种让程序员覆盖正常 HTTP 请求流的机制，该请求将响应加载到浏览器页面。如果它允许您不将响应加载到浏览器页面，这也意味着它不会自动将响应加载到浏览器页面 - 因为这样做将不允许您不加载响应。

如果你想自动加载响应，那么不要使用ajax：

// Replace $.ajax(... with:
window.location.href = "http://localhost:8000/products";

但是，此方法不允许您设置自定义请求标头。

在您的前端代码中，您对 GET /products 响应不做任何处理

后端 sendfile 顾名思义，它只是将文件发送给请求者。作为ajax调用，它必须由前端代码呈现。

添加类似 success: response => $('body').html(response)