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

Question

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

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

我可以使用$.getJSON()，但最好能够直接在我的HTML中拥有数据。

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

提前感谢。

- Rei Miyasaka

---

这种数据会是什么样子，最终结果会是什么样子？你能举个例子吗？ - Pekka

数据是表单输入字段的标签、名称和值列表。我想动态生成标签，否则我就必须将HTML做两次——一次用于初始内容，再嵌入js字符串以使用jQuery在添加更多字段时发出。 - Rei Miyasaka

Answer 1

你可以将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。

这里有一个可行的示例。

- cnanney

Answer 2

您希望在何时何地获取这些数据？

如果您想在视图中使用这些数据，只需将数据传递给视图即可。

操作/控制器：

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[]'，则需要将其格式化为适合jQuery理解的JavaScript。

<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>

- Omar

Answer 3

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

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

- Sruly