在经典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');
              }
            }
        });

    });