Question

我想更新用户点击“赞”按钮时增加的喜欢次数。喜欢我的网站，在这个页面上 http://modelspk.com/urwa-tul-wusqa-model18 用户点击了喜欢按钮，数据库中的喜欢增加了一个。但在页面未刷新之前，它不会在前端更新。我目前使用的代码如下

<script type="text/javascript">
    $("#likeThis").live("click", function () {
        var pid = document.getElementById("pid");
        var uRL = "/updateRatings.aspx?opt=1&pid=" + pid.value;
        $.post(uRL);
        alert('You Like This');
        this.disabled = true;
        document.getElementById("dislikeThis").disabled = true;
        return false;
    });

    $("#dislikeThis").live("click", function () {
        var pid = document.getElementById("pid");
        var uRL = "/updateRatings.aspx?opt=2&pid=" + pid.value;
        $.post(uRL);
        alert("You don't Like This");
        this.disabled = true;
        document.getElementById("likeThis").disabled = true;
        return false;
    });         

</script>

和喜欢或不喜欢的html输入按钮如下..

 <tr>
                    <td>
                        <asp:HiddenField ID="newPhotoID" runat="server" />
                        <input type="hidden" id="pid" value="<%=ModelID%>" />
                        <asp:Label ID="lblModelID" runat="server" Visible="false"></asp:Label>
                        <table width="253" align="center">
                            <tr>
                                <td align="left" class="txt" style="color: #0068c6; font-weight: bold;">
                                    Rate This:
                                </td>
                                <td align="center" class="WaterText">
                                    <input type="image" id="likeThis" onclick="javascript:rateThis(1,<%=ModelID%>);"
                                        src="/images2/inact-thumb.jpg" onmouseover="this.src='/images2/active-thumb.jpg'"
                                        onmouseout="this.src='/images2/inact-thumb.jpg'" />&nbsp;<%=Likes%>
                                    <span class="txt" style="color: #0068c6; font-weight: bold;">Likes</span>
                                </td>
                                <td align="center" class="WaterText">
                                    <input type="image" id="dislikeThis" src="/images2/no-inact.jpg" onclick="javascript:rateThis(2,<%=ModelID%>)"
                                        onmouseover="this.src='/images2/no-active.jpg'" onmouseout="this.src='/images2/no-inact.jpg'" />&nbsp;<%=Dislikes%>
                                    <span class="txt" style="color: #0068c6; font-weight: bold;">Disikes</span>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="127" align="right" class="WaterText">
                        <%=Views %>
                        <span class="txt" style="color: #0068c6; font-weight: bold;">Views</span>
                    </td>
                </tr>

我想要做的是，当用户点击“赞”按钮时，它应该同时增加一个而不刷新页面。

问候：穆达西尔

Answer 1

由于实时（）已弃用，请尝试使用。 on （），如

$("#likeThis").on("click", function () {

并将这些功能放在document.ready中

$(document).ready(function(){
     $("#likeThis").on("click", function () {
     ---------------------
});

Answer 2

你应该手动更新号码。使用Javascript或jQuery的喜欢和不喜欢。

//added new argument, pass image for further use
<input type="image" id="likeThis" onclick="javascript:rateThis(1,<%=ModelID%>,this);"

src =“/ images2 / inact-thumb.jpg”;＆lt;％=喜欢％＆gt;

//do not use live.. use simple javascript

function rateThis(1,modelId,image){
    $.ajax({
        url:"/updateRatings.aspx?opt=1&pid=" + pid.value,
        success:function(result){
            $(image).siblings("span").text(result.d);//update the no of likes and dislikes
        }
    })
}

asp.net return data in Page_Load

您应该参考以上链接，了解如何从页面获取json数据，因为您使用的是页面而不是Web服务。

刷新页面时，Likes数量会增加

2 个答案: