1

我正在从 Microsoft 堆栈（即 WPF）过渡到 HTML5，因此提前为这个问题相当业余的性质道歉。

手头的主题是 HTML 编码和解码。

考虑一个 HTML5 应用程序通过 HTTP 对 C# 后端进行 AJAX 调用。服务器仅返回 JSON 格式的数据，始终确保使用 .html 对 JSON 值字段进行 HTML 编码HttpUtility.HTMLEncode()。

HTML5 客户端反向执行相同的过程。发布到服务器的所有数据首先使用一个简单的 JavaScript 辅助函数进行 HTML 解码。

我的 HTML5 应用程序中所有可能显示的字符串数据都以 HTML 编码的形式存储和传递。这个方案对我来说效果很好。但是今天我发现了 HTML5 文本框，并在这样做的过程中发现了一些奇怪的东西。文本框似乎不喜欢编码文本。

如果我有一个这样定义的文本框：

<input id="festus" type="text"/>

并将其更新如下：

$("#festus").val(someEncodedString)

…文本框显示嵌入到 someEncodedString 中的实际代码，而不是将这些代码转换为适当的字符。我对这种行为感到惊讶，因为我假设浏览器对所有 DOM 元素执行正确的转义码解释。

我试图通过为 val() 编写一个名为 val2() 的帮助器/包装器来抽象出这个问题：

$.prototype.val2=function(newVal){
    return (newVal===undefined)
        ?iHub.Utils.encodeHTML(this.val())      //getting value
        :this.val(iHub.Utils.decodeHTML(newVal));   //setting value
}

[iHub.Utils 是我编写的辅助函数库]

这里的想法是 val2() 将在获取值时对从我的文本框中检索到的数据进行适当的编码，并在设置值之前对其进行解码。这似乎可行，但我无法摆脱这种感觉，即我必须对编码/解码在 HTML5 中的工作方式存在根本性的误解。

使用文本框时编码/解码数据是标准做法吗？与其他常见元素（如<p>and ）不同，文本框<select>在显示编码输入字符串时不执行标准解码，是否以某种方式特别？

再次，对不起，如果这太基本了。HTML5 和 JavaScript 对我来说相当新，我的“HTML5 简介”类书籍并没有真正深入讨论这个主题。

4

1 回答 1

5

HTML 编码适用于 HTML 文档。如果您在 HTML 文档本身中包含您的值，例如<input value="10 &gt; 5" />，您将对它进行编码，以确保您的值中的内容不会与关闭标签>的 混淆。>

但是当您使用 JavaScript 设置字段的值时，就没有混淆的余地了。您没有修改像<input.../>;这样的标签 您正在修改一个 JavaScript 对象。所以你不应该对值进行 HTML 编码。如果您使用的是字符串变量，就像在您的示例中一样，您根本不需要进行任何编码。

另一方面，如果您使用字符串文字来指定值，则需要将其编码为 JavaScript 字符串，例如通过转义'in $("#festus").val('can\'t')。这与您进行 HTML 编码的原因完全相同；以避免与'关闭字符串的 混淆。

您在 JavaScript 中进行 HTML 编码的唯一时间是当您使用它来生成 HTML 代码时，例如el.innerHTML = '<input value="10 &gt; 5" />';.

因此，我建议您不要在 AJAX 响应或请求中对字符串进行 HTML 编码。相反，在您真正生成需要编码的代码之前，请避免编码。因此，在编写 HTML 时仅对字符串进行 HTML 编码，在编写 JavaScript 时仅对字符串进行 JavaScript 编码，等等。

于 2012-04-21T19:16:58.323 回答