javascript - 不明白为什么 ajax 不直接更新我的按钮

Question

我的 ajax 的目标是关注和取消关注某人。问题是，当我单击按钮时，会发送请求，但我需要将页面刷新到新按钮，而不是在下面看到它。如何确保它无需刷新即可直接工作。

<script type="text/javascript">
$(function() {
    $('.ajax_button').click(function() {
        $.ajax({
            type: "POST",
            url: "/" +$(this).attr('name') + "/toggle_follow_via_ajax",
            success: function(msg){
                elm = $('#btn_' + msg);
                if (elm.val() == "Stop Following") {
                    elm.val("Follow");
                } else {
                        elm.val("Stop Following");
                        }
            }
        });
    })
});
</script>

这里是生成按钮的 html.erb

<div class="button_container">
        <input type="button" name="<%= friend.username %>" id="btn_<%=friend.username %>" class="button ajax_button" 
        value="<% if current_user.is_friend? friend %>Stop Following<% else %>Follow<% end %>"/>
    </div>

Answer 1

您可以在调用 ajax 方法之前获取按钮的句柄，而不是使用从服务器返回的值来获取按钮的句柄(因为您已经在按钮对象的范围内)。像这样:

<script type="text/javascript">
$(function() {
    $('.ajax_button').click(function() {
        var btn = $(this);
        $.ajax({
            type: "POST",
            url: "/" +$(this).attr('name') + "/toggle_follow_via_ajax",
            success: function(msg) {
                var val = btn.val() == 'Follow' ? 'Stop Following' : 'Follow';
                btn.val(val);
            }
        });
    })
});
</script>

我还没有测试过这段代码，但它应该可以工作