如何将服务器端数据与HTML中的客户端UI元素相关联？

Question

在开发AJAX应用程序时，我经常遇到这个问题。假设我希望用户能够单击与我的网站上每个评论关联的“标志”图标，这导致将AJAX请求发送到服务器，请求对评论进行标记。我需要将注释ID与客户端的注释相关联，以便AJAX请求可以与服务器进行通信，以标记要注释的注释。

本页介绍了许多以这种方式注释HTML的方法，但是没有一种方法令人满意。虽然我可以使用id或class属性将注释id与标志按钮关联（例如id
=“
comment_1998221”），但是由于较复杂的数据不能很好地适合那些属性（例如任意字符串），因此失败。对于这种事情是否有最佳实践？每当我需要这样做时，我都会遇到一些麻烦，例如使用id属性，一个隐藏的表单字段，或者更糟糕的是将span设置为display：none。

HTML5 data- *属性似乎是一个完美的解决方案，但是我对它们感到厌恶，这使我认为人们必须已经有了他们满意的解决方案。我很想知道这是什么。

Answer 1

本页介绍了许多以这种方式注释HTML的方法，但是没有一种方法令人满意。

不过，它们几乎就是您所拥有的。尽管该页面不是一个非常好的摘要，但仍然存在错误，并且误解了“不引人注目的” JavaScript的含义。

例如，实际上将脚本元素放在主体内是完全有效的—而不是直接放在表元素内。您可以将所有脚本片段放在表的底部，也可以将每一行放在其自己的表中，或者，如果要对DOM进行突变，则可以在有问题的行内添加一些限制。

设置“ id =“ comment-123””，然后扫描所有以“
comment-”开头的id的行，确实适合您的特定情况。为了设置非标识性的额外信息属性，您可以使用HTML5数据属性，也可以使用eg将其入侵到类名中。“
class =“ comment type-foo data-
bar””。当然，ID和类名对于可以使用哪些字符都有其限制，但是可以将任何字符串编码为有效字符串。例如，您可以使用自定义URL样式编码来隐藏非字母数字字符：

<tr class="greeting-Hello_21_20_E2_98_BA">
    ...
</tr>

function getClassAttr(el, name) {
    var prefix= name+'-';
    var classes= el.className.split(' ');
    for (var i= classes.length; i-->0;) {
        if (classes[i].substring(0, prefix.length)==prefix) {
            var value= classes[i].substring(prefix.length);
            return decodeURIComponent(value.split('_').join('%'));
        }
    }
    return null;
}

var greeting= getClassAttr(tr, 'greeting'); // "Hello! ☺"

您甚至可以通过以下方式存储复杂的非字符串值：将它们编码为JavaScript或JSON字符串，然后使用exec（或JSON.parse，如果有）检索它们。

但是，如果您在其中放置任何不重要的内容，很快就会变得混乱。那是您可能喜欢评论的地方。您可以在此处插入除“-”以外的任何内容，如果碰巧出现在字符串中，则很容易转义。

<table>
    <tr class="comment">
        <td>...</td>
        <!-- {"id": 123, "user": 456} -->
    </tr>
</table>

function getLastComment(node) {
    var results= [];
    for (var i= node.childNodes.length; i-->0;)
        if (node.childNodes[i]==8)
            return node.childNodes[i];
    return null;
}

var user= getLastComment(tr).user;

摘要警告说，由于XML解析器可能会丢弃注释，因此不能保证一定会起作用，但是DOM Level 3
LS解析器必须默认保留它们，并且到目前为止，每个浏览器和主要的XML库都可以保留注释。