gpt4 book ai didi

javascript - 在 ajax 请求后重新渲染 EJS 文件

转载 作者:搜寻专家 更新时间:2023-10-31 22:48:10 24 4
gpt4 key购买 nike

我正尝试在单击 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>

基本上它是一个脚本,使用 high-charts 库填充一个 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 资源包含您想要用来填充 EJS 模板的 JSON 数据,并将生成的 HTML 注入(inject)具有以下类名的元素中:面板主体文本中心

根据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(/* ... */);
}

关于javascript - 在 ajax 请求后重新渲染 EJS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29172829/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com