Question

我认为我真的很接近这个工作，但是我需要一些Jquery的帮助，因为一切都按照预期在第二次点击时完成。它只是在第一次点击时不起作用。

我基本上试图复制youtube喜欢和不喜欢的按钮。所以你单击竖起大拇指，它显示+1，如果你再次点击它，它会减去一个。所有这些逻辑都有效，直到我进入AJAX和Jquery部分。

我有一个ajax请求，将用户添加到“已赞”的ManyToManyField。然后我有一个apiview，我正在连接，只产生upvote和downvote计数，然后将其显示在模板中。

这一切都有效，但第一次点击再次在控制台中产生正确的结果。第二次单击会在模板中生成“相反”结果，并在控制台中生成正确的结果。然后，当然如果我每次点击“向上”重新加载它按预期工作，但我试图阻止重新加载。

模板 - Jquery / Ajax

$(".upvote-btn").click(function(e){
      e.preventDefault()
      var this_ = $(this)
      var upvoteToggleUrl = this_.attr("data-href")
      var voteCountAPIUrl = "{% url 'streams:vote-count' streampost.pk %}";
      $.ajax({
        url: upvoteToggleUrl,
        method: 'GET',
        data: {},
        success: function(data){

        }, error: function(error){
          console.log(error)
          console.log("error")
        }
      })
      $.ajax({
        url: voteCountAPIUrl,
        method: 'GET',
        data: {},
        success: function(data){
          console.log(data.upvotes)
          console.log(data.downvotes)
          $('.upvote-count').text(data.upvotes);
        }, error: function(error){
          console.log(error)
          console.log("error")
        }
      })
    })

HTML

<p>
  Upvotes
  <div class="upvote-count" data-href="{% url 'streams:vote-count' streampost.pk %}">
      {{ streampost.upvotes.count }}
  </div>

  <a class="upvote-btn" data-href='{{ streampost.get_api_upvote_url }}'
  href='{{ streampost.get_upvote_url }}'>Up</a>

  Downvotes {{ streampost.downvotes.count }}
</p>

Answer 1

在我看来，您希望在检索upvote计数之前先完成upvote请求。为此，您需要在第一个请求的回调中发出第二个请求：

$(".upvote-btn").click(function(e){
  e.preventDefault()
  var this_ = $(this)
  var upvoteToggleUrl = this_.attr("data-href")
  var voteCountAPIUrl = "{% url 'streams:vote-count' streampost.pk %}";
  $.ajax({
    url: upvoteToggleUrl,
    method: 'GET',
    data: {},
    success: function(data){
      $.ajax({
        url: voteCountAPIUrl,
        method: 'GET',
        data: {},
        success: function(data){
          console.log(data.upvotes)
          console.log(data.downvotes)
          $('.upvote-count').text(data.upvotes);
        }, error: function(error){
          console.log(error)
          console.log("error")
        }
      })
    }, error: function(error){
      console.log(error)
      console.log("error")
    }
  })
})

Django / Ajax / Jquery在同一事件中运行两个ajax请求。

1 个答案: