Ajax成功调用后更新span标记时出现问题

Trouble in updating span tag after Ajax Success call

本文关键字：问题 span 成功 调用 更新 Ajax      更新时间：2023-09-26

我在更新html文件中的span标记时遇到问题。我正在从服务器获取JSON对象，它也显示在console.log中。但当我尝试在AJAX中的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(

使用'；这'；关键字与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

$只是一个以$开头的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

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

你必须直接引用它，或者使用一个临时变量，比如：

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

然后在成功回调内尝试

$(clickedItem)代替$(this)

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

这里有一个很好的解释"this"关键字在回调中的使用。

$('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

试试这个。

相关文章：