如何使用ajax更改刀片模板中的数据

Question

嘿家伙我试图使用ajax在我的刀片模板中进行更改，当我按下按钮时，它会更改数据库中数据的值，并且我想在此处显示此数据一次在我的刀片模板上。 这是我的Java脚本代码：

(function($){ 
    $('.wishlistForm').on('submit', function(){ 
     var form = $(this); 
     $.ajax({ 
      url: form.attr('action'), 
      data: form.serialize(), 
      method: 'post', 
      dataType: 'json', 
      success: function(response){ 
       var wishlistButton = form.find("button[type='submit']"); 
       var x = parseInt($('.wish-btn-count').text()); 
       if(response.actiondone == 'added') { 
        $('.wish-btn-count').text(x++); 
        console.log(x); 
        wishlistButton.text(response.message); 
       } else if(response.actiondone == 'removed') { 
        $('.wish-btn-count').text(x--); 
        console.log(x); 
        wishlistButton.text(response.message); 
       } 
      } 
     }); 
     return false; 
    }); 
})(jQuery); 

，这里是我想在我的模板改变部分：

<div class="wish-btn-count" id="wishlist"> 
         {{$wishlistcount}} 
        </div> 

所以我该怎么办呢？并记录它返回在控制台中值正确，但不显示它在我看来

Answer 1

阻止默认提交事件，这样你就可以触发Ajax

$('.wishlistForm').on('submit', function(e){ 
e.preventDefault(); 

Answer 2

这可能是解决方案。

If you are receiving json object response from the ajax call,first you have to parse that object and then use it. 


Try this, 

(function($){ 
$('.wishlistForm').on('submit', function(){ 
    var form = $(this); 
    $.ajax({ 
     url: form.attr('action'), 
     data: form.serialize(), 
     method: 'post', 
     dataType: 'json', 
     success: function(response){ 
      /*Add this in your code*/ 
      var response = JSON.parse(response.trim()); 
      var wishlistButton = form.find("button[type='submit']"); 
      var x = parseInt($('.wish-btn-count').text()); 
      if(response.actiondone == 'added') { 
       $('.wish-btn-count').text(x++); 
       console.log(x); 
       wishlistButton.text(response.message); 
      } else if(response.actiondone == 'removed') { 
       $('.wish-btn-count').text(x--); 
       console.log(x); 
       wishlistButton.text(response.message); 
      } 
     } 
    }); 
    return false; 
}); 

}）（jQuery）;