json - jquery ajax 返回数据和html

Question

我有一个对我的服务器的 jQuery Ajax 调用，以根据我网站上的一些用户活动为我的页面上的某个部分检索一些 HTML。我发现除了来自服务器的渲染 HTML 之外，我还需要一些 JSON 数据。返回客户端呈现的 HTML 和 JSON 数据的最佳方式是什么？我认为有3种不同的选择：

1. 再次调用服务器以获取 JSON 数据。这涉及第二次往返。我可以使用以下方法对多个 ajax 调用进行字符串处理：

   $when(call_1, call_2).done(function(results_1, results_2){...}))

2. 在呈现的 html 中包含一个脚本块，一旦将呈现的 html 添加到 dom 就会调用该脚本块：

   ... rendered html output ...
   $(document).ready(function ()
   {
       alert('data here');
   });
   

3. 以某种方式将渲染的 html 嵌入到从调用返回的 json 中，然后调用 JS 函数将渲染的 html 与 JSON 分开并相应地更新 DOM。这个选项闻起来很糟糕。

我倾向于选项 1，即使它是额外的服务器命中，因为它似乎是一种更好的方法。您认为哪种方法更好？还有其他我没有想到的方法吗？

谢谢

Answer 1

首先，在服务器端对您的 HTML 进行编码......类似于：

function HTMLEscape(str) {   //Javascript code, adjust as per your server-side lang
    return String(str)
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

现在，假设您在客户端收到以下 JSON 响应：

data = {
     html: "<div>Text goes here</div><script type='text/javascript'>alert('text goes here too')</script>",
     status: 1,
     some: 'stuff'
};

在 Ajax 完成后，开始解压缩 JSON：

ResultJSON = data;

$("div#destination").html(HTMLUnescape(ResultJSON.html));
$("input#status").val(ResultJSON.status)

最后，将此 Javascript 函数隐藏在 .js 文件中的某处：

function HTMLUnescape(str) {
    return String(str)
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>');
}

希望能帮助到你。（-：

Answer 2

选项1更好。你可能也会想到这个，

让发送到 html 的 json 字典包含你所有的数据和 html 内容。像这样的东西，

{
'html':"<div>this is new html</div>",
'var1':'var1 value',
'var2':'var2 value'
}