ajax 提供 html 和脚本

Question

（这是 melt-monitor 的上下文 - 我正在使用的免费 G​​PLv3 软件，稍后应该连接到 GCC MELT）

假设我有一个 Ajax 请求，其响应使新的 JqueryUI tab 添加到某个现有的选项卡面板中。

我的 Ajax 响应显然会为该新标签内容返回一些 HTML sn-p：

<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, ....</p>
</div>

它还应该携带一些 HTML sn-p 用于给出该选项卡标题的列表项：

 <li id='titletab-1'><a href="#tabs-1">Nunc tincidunt</a></li>

它显然应该携带一些 Javascript 代码调用来将标签标题、标签内容粘贴到现有的标签面板中。

  <script>add_new_tab('titletab-1','tabs-1')</script>

目前，我发送的响应是选项卡内容 HTML、列表项 HTML 和脚本元素的串联。然而，这使得<script> 元素成为 DOM 的一部分，我觉得这是一个无用的有效负载。 （我相信浏览器应该只执行一次该脚本并将其丢弃）。这也会导致回复不正确的 HTML（因为 <li> 元素不在 <ul> 内，即使 add_new_tab 函数会将 <li> 放在适当的 <ul> 内）

有更好的方法吗？我正在考虑回复一些包含上述所有三个文本的 JSON 数据，但我发现这也有点沉重......

Answer 1

您可以使用 JSON 格式：

{ html: "<div>...</div><li>...</li>",
  code: "add_new_tab(...)" }

那么你的 AJAX 回调可以是这样的：

function(response) {
    $("#wherever").html(response.html);
    eval(response.code);
}

Answer 2

您可以回复标签内容并生成其他代码。

像这样重播：

<div id="tabs-1" tab-title="Nunc tincidunt" tab-id="titletab-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, ....</p>
</div>

然后解析HTML代码（可能在jQuery中）

var content = $(
    '<div id="tabs-1" tab-title="Nunc tincidunt" tab-id="tabs-1">' +
        '<p>Proin elit arcu, rutrum commodo, vehicula tempus, ....</p>' +
    '</div>'
);
var title = $('<li></li>').attr('id', content.attr('tab-id'));
content.removeAttr('tab-id');
$('<a></a>').attr('href', "#" + content.attr('id')).appendTo(title);

title.appendTo(document.body);
content.appendTo(document.body);

window.add_new_tab(title.attr('id'),content.attr('id'));

---

编辑

@Barmar 的回答是更好的解决方案（在 json 中格式化数据） ajax giving html and script ，但避免使用eval 函数。例如，最好返回一个动作名称，并根据该名称执行预编码的动作。