比隐藏字段更好的方法来存储html中的数据

Question

我想知道是否有更好的方法来存储html内容中的数据.
目前,我使用隐藏字段将一些值存储在我的html文件中.这些值由后面的代码生成.

HTML:

<input type="hidden" id="hid1" value="generatedValue1" />
<input type="hidden" id="hid2" value="generatedValue2" />

因此,我使用jquery在客户端获取这些值,以便将它们传递给ajax请求.

JQuery的

$.ajax({
  data:{
     var1 : $('#hid1').val(),
     var2 : $('#hid2').val()
  }
);

这是正确的方法吗,还是存在更平滑的解决方案来实现相同的结果？由于我不需要在页面上提交这些值,因此input hidden可能是粗略的.

Answer 1

我通常做的是将值作为数据属性添加到 html 表单中：

<form data-field1="generatedValue1" data-field2="generatedValue2">
...
</form>

然后，使用 jQuery 检索它们：

... 
$form = $( my_selector_to_take_the_form );

data:{
     var1 : $('form').attr('data-field1'),
     var2 : $('form').attr('data-field1')
  }

有了这个，您将不会发布任何隐藏字段

Answer 2

如果您不需要表单中的那些，那么只需在您的 JavaScript 中将它们设为变量即可。要输出它们，请通过JavaScriptSerializer类对它们进行编码：

<%
    // Presumably somewhere in your C# code...
    JavaScriptSerializer serializer = new JavaScriptSerializer();
%>
<script>
var hid1 = <%= serializer.Serialize(valueForHid1) %>;
var hid2 = <%= serializer.Serialize(valueForHid2) %>;
</script>

（请参阅下面关于全局变量的注释。）

稍后使用它们：

$.ajax({
  data:{
     var1 : hid1,
     var2 : hid2
  }
);

全局变量：如图所示，hid1并hid2最终作为全局变量（在大多数浏览器上，当您使用隐藏字段时也会这样做）。我建议不要使用全局变量，而是将所有内容都包装在作用域函数中：

(function() {
    var hid1 = <%= serializer.Serialize(valueForHid1) %>;
    var hid2 = <%= serializer.Serialize(valueForHid2) %>;

    // ....    

    $.ajax({
      data:{
         var1 : hid1,
         var2 : hid2
      }
    );
})();

如果由于某种原因必须使用全局变量，请仅使用一个：

var myOneGlobal = {
    hid1: <%= serializer.Serialize(valueForHid1) %>,
    hid2: <%= serializer.Serialize(valueForHid2) %>
};

稍后使用：

$.ajax({
  data:{
     var1 : myOneGlobal.hid1,
     var2 : myOneGlobal.hid2
   }
);

您可以myOneGlobal使用序列化程序将整个对象图输出到一个变量（可能）：

<script>
var myOneGlobal = <%= serializer.Serialize(objectWithData) %>;
</script>

Answer 3

您应该使用 HTML5 数据属性。

IE<a href="#" data-YOURKEY="YOUR-VALUE">My Link</a>

您可以使用 jQuery 轻松访问此属性

$(".mylink").attr("data-YOURKEY");

John Resig 解释得很好： http://ejohn.org/blog/html-5-data-attributes/

另请阅读 HTML5-Doctor http://html5doctor.com/html5-custom-data-attributes/的规范

..如果您想更深入一点： http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-数据- *-属性