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

我试图在点击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-chart.ejs文件。 以下是spider-chart.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> 

基本上它是一个使用高图表库来填充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); 

我对这个问题没有太高的期望,但是在任何networking资源中都没有对这个问题的答案。

       

网上收集的解决方案 "在ajax请求之后重新呈现EJS文件"

如果我理解的很好, /spiderSwitch资源将包含您希望用来填充EJS模板的JSON数据,并将生成的HTML注入具有以下类名称的元素: panel-body text-center

根据EJS文档 ,您需要使用.update()方法,正如您在问题中所述。 但是,第一个参数代表的文档不清楚。

通过浏览EJS代码 ,我发现它实际上应该引用一个元素的ID。 但是,在代码中没有任何带有.tab-pane active标识的元素。

如果你想通过类名来select元素,你需要使用document.querySelector

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

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

 function (event) { event.preventDefault(); $.getScript(/* ... */); }