11

我想知道是否存在更好的方法来将数据存储在 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因此可能很糟糕。

4

4 回答 4

6

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

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

于 2013-08-02T09:33:21.600 回答
5

如果您不需要表单中的那些，那么只需在您的 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>
于 2013-08-02T09:29:42.467 回答
4

您可以使用新的 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');
于 2013-08-02T09:37:51.570 回答
4

您应该使用 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-数据- *-属性

于 2013-08-02T09:38:02.093 回答