在ajax请求后重新呈现EJS文件

re-rendering EJS file after an ajax request

本文关键字：新呈现 EJS 文件 ajax 请求      更新时间：2023-09-26

我正试图在单击href时对服务器进行Ajax调用。当我的href被点击时，我成功地转到我的服务器并调用一个定义的路由。我的路线正确地为我服务，并将数据发回给我。下面是这样做的脚本。

$('.graph-switch').click(function (){
event.preventDefault();
   $.getScript("js/ejs_production.js", function()
       $.ajax({
           url:'/spiderSwitch',
           type: 'GET',
           data: { type: $(this).attr('href') },
           success: function(result){
                console.log(result); // correctly displayed
                // WHAT TO DO AT THIS POINT??
           },
           error: function(){
              alert("well this is not working");
           }
       });
   });
});

在这一点上，我需要重新渲染我想要更改的部分。下面是我想要更改的HTML部分。

<div class="panel-body text-center"><% include partials/spider-chart.ejs %> </div>

基本上，我使用ejs的include关键字添加了一个spider-chatt.ejs文件。下面是spider-chatt.ejs文件。

<!-- views/partials/spider-chart.ejs -->
<!--NOTE: host pages must include the following in <head>-->
<!--<script src='http://code.jquery.com/jquery-1.6.1.js'></script>-->
<!--<script src="scripts/SpiderChartControl.js"></script>-->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chart" style="min-width: 300px; max-width: 1000px; height: 300px; margin: 0 auto"></div>
<script>
    var spiderGraphData = <%- JSON.stringify(spiderGraphData) %>
    var options = {
        metric: 'accuracy'
    }
    console.log(JSON.stringify(spiderGraphData));
    SpiderChartControl.draw("chart", spiderGraphData, options);
</script>

基本上，它是一个使用highcharts库填充div的脚本。据我所知，有两种方法我都没能奏效。

像这样的东西：

$("#id").innerHtml = "<div class='panel-body text-center'> <% include partials/spider-graph.ejs %> </div>";

或者类似的使用ejs结构的东西：

new EJS({url : 'partials/spider-chart.ejs' }).update('.tab-pane active', result);

我对这个问题不抱太大希望，但在任何网络资源中都没有这个特定问题的答案。

如果我理解得很好，/spiderSwitch资源包含JSON数据，您希望使用这些数据来填充EJS模板，并在具有以下类名的元素中注入生成的HTML：panel-body text-center。

根据EJS文档，您需要使用.update()方法，正如您在问题中所述。然而，文件中并不清楚第一个论点代表了什么。

通过浏览EJS代码，我发现它实际上应该引用元素的ID。不过，您的代码中没有任何具有.tab-pane active ID的元素。

如果您想按类名选择元素，则需要使用document.querySelector，如下所示：

new EJS({
    url: 'partials/spider-chart.ejs'
}).update(
    document.querySelector('.panel-body.text-center'),
    result
);

顺便说一句，正如@balder所说，你的代码中有一个引用错误，如果你想使用event参数，你必须在函数参数中声明它：

function (event) {
    event.preventDefault();
    $.getScript(/* ... */);
}
相关文章：