2 具有相同对象的 JQuery AJAX post req答案

【问题标题】：2 JQuery AJAX post req with the same object2 具有相同对象的 JQuery AJAX post req
【发布时间】：2012-12-13 09:41:35
【问题描述】：

我想要做的，确切地说，是这样的：

<form>
    <input type="button" class="btn btn-warning" id="follow" value="Follow">  
</form>
<script type="text/javascript">

 $('#follow').click(function(){  
      $.ajax({ 
        url: '/follow'
        , type: 'POST'
        , cache: false
        , data: { user: '<%= username %>' }
        , complete: function() {


         },

        success: function(data) {

        },

        error: function() {

           console.log('process error');

        },
   });

   $('#follow').attr('value', 'Following');  
   $('#follow').attr('id', 'unfollow'); 
 });   

 $('#unfollow').click(function(){  
      $.ajax({ 
        url: '/unfollow'
        , type: 'POST'
        , cache: false
        , data: { user: '<%= username %>' }
        , complete: function() {


         },

        success: function(data) {


        },

        error: function() {

           console.log('process error');

        },
   });

   $('#follow').attr('value', 'Follow');  
   $('#follow').attr('id', 'follow'); 
 });           

</script>

第一个 post req 工作正常，但第二个 req 不行。当我按下按钮时，值不会改变，我也没有收到/unfollow 的通讯请求。这里有什么问题？

提前谢谢！

【问题讨论】：

error: 函数后面多了一个逗号，这是无效的 Javascript。

标签： jquery ajax node.js post express

【解决方案1】：

您的事件绑定发生在第一次加载 DOM 时。当您动态更改 ID 时，不会导致绑定更改。您需要使用on() 进行委派才能使其正常工作。

$(".btn").on("click", "#follow", function() {...});
$(".btn").on("click", "#unfollow", function() {...});

另一种选择是不更改 ID。使用单个处理程序，并检查该值当前是"Follow" 还是"Unfollow"，并调用相应的URL。

$("#follow").click(function () {
    if ($(this).val() == "Follow") {
        $(this).val("Unfollow");
        var url = "/follow";
    } else {
        $(this).val("Follow");
        var url = "/unfollow";
    }
    $.ajax( {
        url: url
        , type: 'POST'
        , cache: false
        , data: { user: '<%= username %>' }
        , complete: function() {
        },

        success: function(data) {
        },
        error: function() {
           console.log('process error');
        }
    });
});

【讨论】：

如果我错了，请纠正我，但您不能以这种方式委托。您从父元素委托给子元素，而不是从父元素委托给自己。要使您的代码工作 #btn 需要成为 document
我可能是错的，但我认为委托的工作方式是将处理程序绑定到.btn，处理程序检查目标元素是否is("#follow")。我认为这不一定是严格的亲子关系。但如果是这样，".btn" 可能会变成 "form"。
仅当所有按钮都在一个表单中时:)
我们不关心所有按钮，只关心这一个按钮。它是一种形式。
由于他绑定到一个特定的 ID，而不是一个类，它可以是非常具体的。重要的是围绕该按钮的 HTML（除非他打算将这个 ID 转移到整个文档中，这确实是糟糕的设计）。

【解决方案2】：

Barmar 是正确的，但您也没有正确引用您的 ID。

您在将其更改为 #unfollow 后正在寻找 #follow :)

这是你想要做的一个例子。

$(document).ready( function(){

   $("body").on("click", "#follow", function(){
      $(this).val("Unfollow");  
      $(this).attr("id","Unfollow"); 
   });

   $("body").on("click", "#Unfollow", function(){
      $(this).val("Follow");  
      $(this).attr("id","follow"); 
   }); 

});

还有here it is at Jsfiddle

【讨论】：

【解决方案3】：

更改 id 不是一个好主意。

您可以通过保持 id 相同并在单击处理程序中测试 value 来获得正确的效果，如下所示：

$('#follow').on('click', function(){
    if(this.value == 'Follow') {
        $.ajax({
            url: '/follow',
            type: 'POST',
            cache: false,
            data: { user: '<%= username %>' },
                complete: function() {
            },
            success: function(data) {
            },
            error: function() {
                console.log('process error');
            }
        });
        $(this).attr('value', 'Following'); 
    }
    else {
        $.ajax({ 
            url: '/unfollow',
            type: 'POST',
            cache: false,
            data: { user: '<%= username %>' },
            complete: function() {
            },
            success: function(data) {
            },
            error: function() {
                console.log('process error');
            }
        });
       $(this).attr('value', 'Follow'); 
    }
});

您可以将其简化为一个 $.ajax() 块，具体取决于成功/错误/完成功能的相似程度。

您可能还想在成功处理程序中移动更改#follow 值的语句。否则，按钮的值将至少在片刻内撒谎，或者如果发生 ajax 错误则更长时间。

【讨论】：