javascript - 在经典 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 单击事件将一些数据发送到 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');
              }
            }
        });

    });