Javascript 立即执行Laravel@include in js

我目前正在一个网页上创建一个功能，目的是在某个下拉菜单值发生更改时，使用js向服务器创建一个HTTP请求，并根据请求响应更改网页。 为了实现这一点，我使用了一个Laravel@include来包含将基于json响应构建页面的视图

问题出在这一行

allNews.innerHTML+=（`include（'partials.news.post'，['news'=>`+news.data[i]+`]）

这里的问题是，当加载页面时，js会立即抛出一个错误（在视图中由参数news.data[i]为null引起），它甚至不会等待触发EventListener或响应请求。如果我删除这行代码，它不会抛出任何错误并按预期工作，但是如果我对它进行注释，同样的错误也会发生，至少可以说是奇怪的。这里有什么问题吗

我使用stackoverflow问题作为开发的基础

我知道视图构建得很好，不会抛出错误，因为我在其他实例中使用它

让select=document.getElementById（“排序选择”）；
让allNews=document.getElementById（“posts结果”）；
设xhttp=newXMLHttpRequest（）；
console.log（js_查询）
select.addEventListener（“更改”，函数（）{
xhttp.open（“GET”、“/api/load posts search？sortBy=“+select.value+”&search=“+js_query，false”）；
xhttp.send（）；
让news=JSON.parse（xhttp.responseText）；
控制台日志（新闻）；
allNews.innerHTML=“”
对于（i=0；i`+news.data[i]`]）`）
}  
})

XMLHttpRequest将是异步的，因此我认为您需要更改：

select.addEventListener("change",function(){

        xhttp.open("GET", "/api/load-posts-search?sortBy="+ select.value +"&search=" + js_query, false);
        xhttp.send();
        let news = JSON.parse(xhttp.responseText);
        console.log(news);
        allNews.innerHTML=""
        for(i=0;i<news.total;i++)
        {
            console.log(news.data[i]);
            allNews.innerHTML+=(`@include('partials.news.post',['news'=>`+news.data[i]`])`)
        }  
    })

select.addEventListener（“更改”，函数（）{
xhttp.open（“GET”、“/api/load posts search？sortBy=“+select.value+”&search=“+js_query，false”）；
xhttp.send（）；
让news=JSON.parse（xhttp.responseText）；
控制台日志（新闻）；
allNews.innerHTML=“”
对于（i=0；i`+news.data[i]`]）`）
}  
})

致：

select.addEventListener（“更改”，函数（）{
xhttp.open（“GET”、“/api/load posts search？sortBy=“+select.value+”&search=“+js_query，false”）；
xhttp.send（）；
//等待来自请求的响应
xhttp.onload=函数（）{
让news=JSON.parse（xhttp.responseText）；
控制台日志（新闻）；
allNews.innerHTML=“”
对于（i=0；i`+news.data[i]`]）`）
}
}
})

我不确定是否要在JavaScript中使用

@include

，我没有做过这样的事情来了解它的工作效果。如果包含的刀片文件是静态的，我想它会很好，我只是不确定它如何传递一个来自ajax请求的动态

news

属性，即

@include

的一部分是服务器端，另一部分是客户端，但我可能错了，它会完全正常工作

---

您可能需要重构并从控制器返回生成的部分的html，而不是在ajax请求的成功阶段尝试这样做。

您不能混合使用JS和PHP

@include（'partials.news.post'）

是PHP，将在服务器上执行，

+news.data[i]

是JavaScript，将在客户端执行。所以这永远不会像预期的那样奏效。首先，感谢你的回答。我试过这个，但它的行为仍然是一样的。据我（不太了解），xhttp.responseText在继续程序之前已经等待响应到达。无论如何，我认为你在js中使用@include可能是对的，它看起来有点粗略，我可能会尝试另一种方法来解决这个问题。再次感谢你的帮助。没问题，很抱歉我帮不了你。我不知道关于xhttp.responseText，我需要尝试一下。另一种方法可能是以某种方式将partial作为es6模板，您可以在JS中填充新闻项，然后您的响应将与现在相同，即JSON。

select.addEventListener("change",function(){

        xhttp.open("GET", "/api/load-posts-search?sortBy="+ select.value +"&search=" + js_query, false);
        xhttp.send();

        // wait on the response from the request
        xhttp.onload = function() {
            let news = JSON.parse(xhttp.responseText);
            console.log(news);
            allNews.innerHTML=""
            for(i=0;i<news.total;i++)
            {
                console.log(news.data[i]);
                allNews.innerHTML+=(`@include('partials.news.post',['news'=>`+news.data[i]`])`)
            }
        }
    })