ajax请求后重新渲染EJS文件
Posted
技术标签:
【中文标题】ajax请求后重新渲染EJS文件【英文标题】：re-rendering EJS file after an ajax request 【发布时间】：2015-05-24 05:37:16 【问题描述】：我正在尝试在单击 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);
我对这个问题没有寄予厚望，但在任何网络资源中都没有对这个特定问题的答案。
【问题讨论】：
您在哪一部分遇到了麻烦？我看到您有一个小错误，即 event.preventDefault()，未定义事件，您应该在函数处理程序中定义它，例如 fuction(event) event.preventDefault() .... 我在缺少使用新 EJS 构造执行此操作的文档时遇到了问题。这就是为什么我最终通过更改内部 html 来使其工作。 嘿，我也有类似的问题。我使用 ajax 将用户的电子邮件和密码发送到服务器，如果它们是正确的，那么我需要将用户带到另一个页面吗？这怎么可能。我可以使用 ajax 来做到这一点吗 【参考方案1】：如果我理解得很好，/spiderSwitch 资源包含您希望用于填充 EJS 模板的 JSON 数据，并将生成的 HTML 注入具有以下类名的元素中：panel-body text-center。
根据EJS documentation，您需要使用.update() 方法，正如您在问题中所述。但是，文档不清楚第一个参数代表什么。
通过浏览EJS code，我发现它实际上应该引用一个元素的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(/* ... */);
【讨论】：
这个答案似乎是使用 new EJS() 构造的正确方法。虽然仍然可以更改我最终使用的页面的内部 html。以上是关于ajax请求后重新渲染EJS文件的主要内容，如果未能解决你的问题，请参考以下文章