在 HTML 中嵌入原始数据以在 jQuery 中解析答案

【问题标题】：Embed raw data in HTML to parse in jQuery在 HTML 中嵌入原始数据以在 jQuery 中解析
【发布时间】：2011-03-27 00:14:57
【问题描述】：

在我职业生涯的大部分时间里，我一直生活在桌面世界中，所以请原谅我提出这样一个基本问题，但我不太确定从哪里开始。

我想连同我的 HTML 返回一些原始数据，并在 HTML 准备好后立即使用 jQuery 解析和显示数据。我大致知道我的 js 代码应该是什么样子，但我不确定应该如何将原始数据嵌入到我的 HTML 中。

我可以使用 $.getJSON()，但如果我可以在我的 HTML 中直接保存数据会更好。

我认为 json 或 XML 都可以，但是当它们嵌入 HTML 时，转义/嵌入/解析它们的正确方法是什么？

提前致谢。

【问题讨论】：

那会是什么样的数据，最终结果会是什么样子？你能举个例子吗？
数据是表单输入字段的标签、名称和值的列表。我想动态生成标签，否则我必须执行两次 HTML——一次用于初始内容，然后再次嵌入到 js 字符串中，以便在添加更多字段时使用 jQuery 发出。

标签： javascript html asp.net-mvc xml json

【解决方案1】：

就像你说的那样，最好使用 $.post 或 $.get 或 $(element).load() 等通过 Ajax 获取它......

但如果您必须将其保存在页面中，则通常保存在隐藏字段中。 Asp.net 使用二进制序列化和 Base64 将内容保存在隐藏字段中，但您可以将其保存为 Json 字符串，然后在您的 JS 中使用。

【讨论】：

【解决方案2】：

您可以将 JSON 数据放在一个隐藏的 div 中，然后从 jQuery 解码和使用。

例如，我们将采取：

{"foo":"apple","bar":"orange"}

将其转义并放入一个 div：

<div id="data">%7B%22foo%22%3A%22apple%22%2C%22bar%22%3A%22orange%22%7D</div>

然后从jQuery中，我们就可以使用数据了：

var data = jQuery.parseJSON(unescape($("#data").html()));

所以打电话给alert(data.foo) 会给我们apple。

Here's a working example.

【讨论】：

【解决方案3】：

您在何时何地需要这些数据？

如果你想要它在你的视图中，只需将数据传递给视图

动作/控制器：

public ActionResult MyAction()
{
    ViewData["MyData"] = "this is a sample data of type string";
    return View();
}

然后，在你的视野中：

<script>
    var data = '<%= ViewData["MyData"] %>';
    $(document).ready(){
        alert(data);
    }
</script>
<h1><%: ViewData["MyData"] %></h1>

当然，如果您使用的是 List<string> 或 `string[]'，则需要将其格式化为正确的 JavaScript 以便 jQuery 理解。

<script>
     var dataArray = [

     <% foreach(string s in (string[])ViewData["MyDataArray"]){ %>
        <%= s %>,
     <% } %>   
     ];
</script>

如果您在操作而不是视图中生成正确的 JavaScript 以避免在视图中出现丑陋的标记，那就更好了：

public ActionResult MyAction()
{
    string[] myArray = new string[]{ "hello", "wolrd" };
    ViewData["MyData"] = myArray;
    ViewData["JavaScriptArray"] = "[" + myArray.Aggregate((current,next) => string.Format("'{0}','{1}',", current, next).TrimEnd(new char[] { ','})) + "]";
    // or you can use your favorite JavaScript serialize
    return View();
}

现在您可以在视图中执行以下操作：

<script>
    var dataArray = <%= ViewData["MyJavaScriptArray"] %>;
    alert(dataArray[0]); // alerts 'hello'
</script>

【讨论】：