在經典ASP中呈現鏈接，然后使用jquery對其進行更改

Question

我有一個鏈接，該鏈接是我使用經典asp中的if語句在頁面加載時呈現的，如下所示：

// SQL stuff up here

<% if not rs.eof then %>
    <a href="#" class="link" data-mediatype="on" data-id="<%=somevar%>"><i class="fa-star"></i></a>
<% else %>
    <a href="#" class="link" data-mediatype="off" data-id="<%=somevar%>"><i class="fa-star-o"></i></a>
<% end if %>

我還使用jQuery click事件將一些數據發布到ajax請求中，如下所示；

$(document).ready(function(){

    $('.link').click(function(e) {

        e.preventDefault();

        var mediatype = $(this).data('mediatype');
        var id = $(this).data('id');

        $.ajax({
            url: '/post/url/here.asp',
            data: { 'media_type': mediatype, 'id': id },
            type: 'POST',
            success: function(result) {
                location.reload();
            }
        });

    });

});

如果找到記錄，則data-mediatype="on"和<i> class="fa-star" ，但是如果找不到記錄，則data-mediatype="off"和<i> class="fa-star-o"

然后，當您單擊鏈接時，它將發布到ajax。

成功執行ajax調用后，頁面將使用location.reload()重新加載，並且可以正常工作。

理想情況下，我希望在不重新加載頁面的情況下執行此操作。 但由於SQL需要運行以確定要顯示的鏈接，因此我不確定如何處理。

任何幫助將不勝感激。

Answer 1

我認為您不需要重新加載整個頁面-只需將單擊的鏈接切換為另一個鏈接即可（除非單擊可以更改多個鏈接-尚不清楚）：

$('.link').click(function(e) {

        e.preventDefault();
        var $clicked = $(this),
            $icon = $clicked.children('i');

        var mediatype = $clicked.data('mediatype');
        var id = $clicked.data('id');

        $.ajax({
            url: '/post/url/here.asp',
            data: { 'media_type': mediatype, 'id': id },
            type: 'POST',
            success: function(result) {
              if (mediaType == 'on') {                /* swap icon and mediaType */
                $clicked.data('mediatype', 'off');
                $icon.removeClass('fa-star').addClass('fa-star-o');
              } else {
                $clicked.data('mediatype', 'on');
                $icon.removeClass('fa-star-o').addClass('fa-star');
              }
            }
        });

    });