ajax를 사용하여 블레이드 템플릿의 데이터를 변경하는 방법

Question

안녕하세요, 저는 블레이드 템플릿에서 아약스를 사용하여 변경하려고합니다. 버튼을 누르면 데이터베이스의 데이터 값이 변경되고이 데이터를 표시하고 싶습니다. 내 블레이드 템플릿에 한 번. 내 자바 스크립트 코드의 그 :

(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

방지에 표시되지 않습니다, 그래서 당신은이 해결책이 될 수 있습니다 아약스에게

$('.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);