时间戳

首页 > 解决方案 > Laravel @include in js 被立即执行

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 问题来作为我开发的基础。

我知道视图构建良好并且不会抛出错误，因为我在其他情况下使用它。

<script defer>

    let select = document.getElementById("sort-select");
    let allNews = document.getElementById("posts-result");
    
    let xhttp = new XMLHttpRequest();

    console.log(js_query)
    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]`])`)
        }  
    })
</script>

标签： javascriptlaravel

解决方案

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("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]`])`)
            }
        }
    })

我不确定是否@include在 JavaScript 中使用，我没有做过什么来了解它的工作情况。如果包含的刀片文件是静态的，我认为它会很好，我只是不确定它将如何工作，将news来自 ajax 请求的动态属性传递给它，即一部分@include是服务器端，一部分是客户端，但我可能是错的，它会完全正常工作。

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

推荐阅读