Ajax Success 调用后无法更新 span 标签答案

【问题标题】：Trouble in updating span tag after Ajax Success callAjax Success 调用后无法更新 span 标签
【发布时间】：2015-10-20 01:56:50
【问题描述】：

我在更新 html 文件中的 span 标签时遇到问题。我正在从服务器获取 JSON 对象，它也在 console.log 中显示。但是当我尝试在 AJAX:Success 中的 span 标签上更新它时，它不起作用。如果我在成功标签之外调用同一行，它确实在那里工作。

AJAX.JS

$('a.up_vote').click(function(e) {
          e.preventDefault();

          $(this).siblings("span").css( "background-color", "green" );

          $.ajax({
            url: $(this).attr('href'),
            type :'get' ,
            success : function (data){
              $(this).find("span").css( "background-color", "red" ); 
              $(this).siblings('span').html(data.count);
              $(this).siblings("span").css( "background-color", "red" );
            },
            failure : function (data){
              alert('failure') ; 
            }
          }) ;  // ajax call 

       }); // upvote link call

HTML

   <div class ='up' style="float:left">
         <a href='{% url 'upvote-detail' post.id %}' class='up_vote'>Up vote</a>
         <span> {{ post.upvote }} </span> 
   </div>

【问题讨论】：

$(this) 里面的成功不是你想的那样……试试打印吧..
你也在使用 Angular JS 吗？
@Neron 我正在使用 DJANGO
请更新此线程，接受答案或通过评论或编辑提供详细信息，甚至自行回答为什么它不回答您的问题。

标签： javascript jquery ajax dom

【解决方案1】：

问题是你对 $(this) 的使用

Using the context of the 'this' keyword with jQuery

https://remysharp.com/2007/04/12/jquerys-this-demystified

一种简单的方法是存储对 $(this) 的引用，然后再使用它。

例如：

$('a.up_vote').click(function(e) {
      e.preventDefault();
      window.alert("hello");
      console.log("hello there");

      var $that = $(this);

      $that.siblings("span").css( "background-color", "green" );

      $.ajax({
        url: $that.attr('href'),
        type :'get' ,
        success : function (data){
          // alert('success');
          console.log('hello from success ajax')
          console.log(data.count); 
          $that.find("span").css( "background-color", "red" ); 
          $that.siblings('span').html(data.count);
          $that.siblings("span").css( "background-color", "red" );
          // $('#upvote_count').html(data.count);
          console.log('siblings passed')
        },
        failure : function (data){
          alert('failure') ; 
        }
      }) ;  // ajax call 

   }); // upvote link call

$that 只是一个以 $ 开头的 var 名称，不是特定于 jquery 本身，而是存储 jquery 对象的变量的有用习惯（包括 $() 包装的 DOM 元素，因为它们也是 jquery 对象）

$that = $(this) 是一个有用的模式，可以使用任何你想要的变量名。

此外，当某些东西不起作用时，始终建议使用简单的控制台调用来检查关键变量

console.log('debug',$(this));

您只需按 F12 并转到控制台选项卡（或谷歌您的浏览器名称 + 开发控制台，如果没有任何反应）并查看那里打印的内容（甚至使用断点或其他调试方法，请参阅链接）

调试链接

Chrome 开发者工具：https://developer.chrome.com/devtools

在 Chrome 中调试 JS：https://developer.chrome.com/devtools/docs/javascript-debugging

【讨论】：

【解决方案2】：

成功回调中的$(this) 不再引用单击的项目。

您必须直接引用它或使用临时变量，例如：

var clickedItem = $(this); // before ajax call

然后在成功回调里面尝试

$(clickedItem) 而不是$(this)

我希望这对你有用；请告诉我。

Here你有一个很好的解释'this'关键字在回调中的使用。

【讨论】：

【解决方案3】：

$('a.up_vote').click(function (e) {
    e.preventDefault();

    $(this).siblings("span").css("background-color", "green");

    $.ajax({
        url: $(this).attr('href'),
        type: 'get',
        success: function (data) {
            $('a.up_vote').siblings("span").css("background-color", "red");
            $('a.up_vote').siblings('span').html(data.count);
        },
        failure: function (data) {
            alert('failure');
        }
    });  // ajax call 

}); // upvote link call

试试这个。

【讨论】：