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

如果您不需要表单中的那些，那么只需在JavaScript中创建变量即可。要输出它们，请通过JavaScriptSerializer class：

对它们进行编码

<%
    // 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 2

我通常做的是将值作为数据 - 属性添加到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 3

您可以使用新的HTML5“数据”属性。（http://html5doctor.com/html5-custom-data-attributes/）

您的代码隐藏部分会执行以下操作：

<ul data-listname="{put name here}">
    <li data-key="{put key here}>
        Item1 
    </li>
</ul>

然后在你的jQuery中你可以做到：

var firstId = $('li').first().data('id');
var list = $('ul').data('listname');

确保在data-之后仅使用小写我发现，否则它将无法正常工作。您还可以设置如下数据：

$('#something').data('smthgnelse', 'Hi there');

Answer 4

您应该使用HTML5数据属性。

即<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-data- * - 属性

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

4 个答案: