如何使用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）;