Question

我想使用Jquery Ajax为feed实现一个类似的按钮。在feed-page.html上。代码的工作方式是让用户喜欢或不同于feed但是如何让<p id='count'>重新加载ajaxly on点击Like按钮？感谢您的帮助

<p>{{feed_detail.text|linebreaks}} </p>
          <p id='count'> {{feed_detail.total_likes}} concern{{feed_detail.total_likes|pluralize:'s'}}</p>
           <p> {{feed_detail.pub_date|naturaltime|capfirst}} </p>
                    <input type="button" id="like" name="{{feed_detail.slug}}" value="Like" />
<script>
$('#like').click(function(){

      $.ajax({

               type: "POST",
               url: "{% url 'like' %}",
               data: {'slug': '{{feed_detail.slug}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
               dataType: "json", 
          }); 
    })
</script>

Answer 1

尝试这样的操作，将输入更改为键入复选框

<p id='count'><span>{{feed_detail.total_likes}}</span> concern{{feed_detail.total_likes|pluralize:'s'}}</p>
<input type="checkbox" id="like" name="{{feed_detail.slug}}" value="Like" />
    $('#like').click(function(){
      var el = $(this);
          $.ajax({

                   type: "POST",
                   url: "{% url 'like' %}",
                   data: {'slug': '{{feed_detail.slug}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                   dataType: "json", 
                   success: function(data){
                      if (el.is(':checked')) {
                       $('#count span').text(parseInt($('#count span').text())+1);
                      } else {
                      $('#count span').text(parseInt($('#count span').text())-1);
                      }
                   }
              }); 
        });

演示：https://jsfiddle.net/gxup1wpo/

Answer 2

我认为你正在寻找成功的功能。

.done(function(response) {
    alert( response );
    console.log( response );
})

然后在浏览器中查看控制台日志。请查看此link了解详情。

Answer 3

我找到了一个非常简单的解决方案

<p>{{feed_detail.text|linebreaks}} </p>
          <p id='count'> {{feed_detail.total_likes}} concern{{feed_detail.total_likes|pluralize:'s'}}</p>
           <p> {{feed_detail.pub_date|naturaltime|capfirst}} </p>
                    <input type="button" id="like" name="{{feed_detail.slug}}" value="Like" />
<script>
$('#like').click(function(){

      $.ajax({

               type: "POST",
               url: "{% url 'like' %}",
               data: {'slug': '{{feed_detail.slug}}' , 'csrfmiddlewaretoken': '{{ csrf_token }}'},
               dataType: "json", success: function(){
                       $('#count').load("{% url 'feed_detail' slug=feed_detail.slug %} #count");

                   }
          }); 
    })
</script>

此{% url 'feed_detail' slug=feed_detail.slug %}应该是当前网页的网址，并注意使用count id catch来专门获取和重新加载该部分网页。

如何使Ajax在成功时改变变量

3 个答案: