我應該如何將服務器端數據與HTML中的客戶端UI元素相關聯？

我在開發AJAX應用程序時經常遇到這個問題。比方說，我希望用戶能夠點擊與我網站上每條評論相關的「標誌」圖標，這會導致AJAX請求發送到服務器，請求標記評論。我需要將評論ID與客戶端的評論相關聯，以便AJAX請求可以向服務器傳達要標記的評論。我應該如何將服務器端數據與HTML中的客戶端UI元素相關聯？

This page解釋了多種方式以這種方式註釋HTML，但他們都不是很理想。雖然我可以只使用一個ID或類屬性來評論ID旗按鈕（例如ID =「comment_1998221」）相關聯，這將失敗，更復雜的數據不很好地成爲這些屬性（例如，任意的字符串）。這種事情有最佳做法嗎？每次我需要這樣做時，我最終都會遇到一些類似於使用id屬性，隱藏表單字段或者更差的跨度設置來顯示：無。

的HTML5數據 - *屬性似乎是一個完美的解決方案，但我已經看到了很多的敵意向他們，這使我認爲人們必須擁有他們滿意的解決方案。我很想知道它是什麼。

來源

2009-08-25 Shawn

對此有讀：http://stackoverflow.com/questions/992115/custom-attributes-yay-or-nay/992464 – James 2009-08-25 23:40:53

這是一個有趣的閱讀，但遺憾的是所有的建議，跌倒了，我引用的頁面中。我懷疑沒有好的答案，並且大多數人使用類和id屬性和隱藏元素的組合。 – Shawn 2009-08-26 00:03:28

本頁解釋了以這種方式註釋HTML的一些方法，但它們都不是非常令人滿意。

儘管如此，他們是幾乎所有你已經有了。雖然該頁面並不是一個非常好的摘要，但是存在錯誤，並且誤解了JavaScript意味着什麼「不顯眼」。

例如它實際上是完全有效的把一個腳本元素體內 - 只是沒有直接的表元素中。你可以把所有的腳本片段在表的底部，或把每一行中自己的表，甚至，有一些限制，如果你正打算變更DOM，在討論的行內。

設置「ID =‘評論-123’，」然後用一個id開始「comment-」掃描所有行的是你的具體情況確實不錯。爲了設置非標識的額外信息屬性，您可以使用HTML5數據屬性或使用例如將其添加到類名中。「class =」註釋type-foo數據欄「」。當然，ID和類名對於可以使用的字符都有限制，但可以將任何字符串編碼爲有效字符串。例如，你可以使用自定義URL式編碼隱藏非字母數字字符：通過編碼它們的JavaScript或JSON字符串，然後使用檢索它們

<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! ☺"

你甚至可以複雜的非字符串值存儲在這種方式， 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庫至今呢。

來源

2009-08-26 00:20:08 bobince

jQuery的數據API是這個漂亮。

假設你有以下DOM ...

<div class="comment"> 
<a href="#">Flag</a> 
Some text 
</div>

然後，假設你還裝載阿賈克斯這些元素，你可以做

$(".comment").data('someKey', (any javascript value/object));

後來的後來，在點擊處理程序的標誌，你可以做...

$(".flagSelector").click(function(ev) { 
    var extraData = $(this).closest(".comment").data("someKey"); 
    // use extraData along with your request 
});

如果您在服務器端生成註釋並將它們隨初始頁面一起發送，您需要弄清楚如何初始化數據。一種方法是在註釋和頁面加載時擁有唯一的ID-s，仍然通過Ajax從服務器加載自定義數據。

來源

2009-12-03 18:58:20 Jaanus

這裏是我會怎麼做：

當渲染頁面的服務器端，生成標誌鏈接作爲一個正常的鏈接，這樣，它會正常工作，如果你啓動Javascript並沒有。

<a class="flag_link" href="/comment/123/flag/"><img src="flag.gif" /></a>
然後，在JavaScript中，添加一個click事件通過Ajax來做到這一點，而不是。我將使用jQuery作爲示例，但如果沒有它，同樣的事情也不難做到。

<script>

 
$('a.flag_link').click(function() { 
    $.get($(this).attr('href'), function() { 
    alert('you flagged this comment'); 
    }); 
});

</script>

當然，你會做一些更人性化不是一個警報信號的成功。

來源

2009-12-03 19:16:34

我應該如何將服務器端數據與HTML中的客戶端UI元素相關聯？

回答

相關問題