jQuery 및 Ajax로 버튼 전환

Question

저장 및 저장 취소 버튼이 두 개 있습니다. 일반적으로 저는 각각 PHP 포스트 페이지로 이동하여 페이지를 새로 고쳤습니다. Save를 클릭하면 페이지가 새로 고쳐지고 Unsave 만 표시됩니다. 반대의 경우도 마찬가지입니다.

저는 Ajax와 jQuery를 사용하여이 작업을 수행하려고합니다. 기본적으로, 나는이 있습니다

<span style="display: <?php echo $youveSaved; ?>"><input type="button" value="Unsave" onClick="$.post('php/removeSave.php', $('#removeSave').serialize());$('#jqs').attr('value', 'Save');" id="jqs"/></span> 
<span style="display: <?php echo $hasSaved; ?>"><input type="button" value="Save" onClick="$.post('php/saveCoup.php', $('#saveCoup').serialize());$('#jqs').attr('value', 'Unsave');" id="jqs"/></span> 

여기에 일반적으로 그들을 전환 할 것 PHP가있다 :

//$thisIsSaved would return 1 if the coupon has been saved and 0 if not 
     $hasSaved = "inline"; 
     $youveSaved = "none"; 
     if($thisIsSaved > 0 && $_SESSION["loggedIn"] == 1) 
      { 
       $hasSaved = "none"; 
       $youveSaved = ""; 
      } 
     elseif($thisIsSaved == 0 && $_SESSION["loggedIn"] == 1) 
      { 
       $hasSaved = ""; 
       $youveSaved = "none"; 
      } 
     else 
      { 
       $hasSaved = "none"; 
       $youveSaved = "none"; 
      } 

어떻게 내가 할 수있는 순수 아약스 + jQuery로 페이지 새로 고침없이?

Answer 1

jQuery과 jQuery의 $.ajax() 방법으로 쉽게 할 수 있습니다.

라이브 예를 참조하십시오 : http://jsfiddle.net/rtE9J/11/

HTML을

<button id="save">Save</button> 
<button id="unsave">Unsave</button> 
<div id="result"></div> 

CSS

#unsave{display:none} 

JS

,

$('#save, #unsave').click(function(){ 

    //maintain reference to clicked button throughout 
    var that = $(this); 

    //disable clicked button 
    $(that).attr('disabled', 'disabled'); 

    //display loading Image 
    $('#result').html('<img src="http://blog-well.com/wp-content/uploads/2007/06/indicator-big-2.gif" />'); 

    //Make your AJAX call 
    $.ajax({ 
     url: 'changeSave.php', 
     data: {action: $(this).attr('id')}, 
     success: function(d){ 

      //re-enable the button for next time 
      $(that).attr('disabled', ''); 

      //Update your page content accordingly. 
      $('#result').html(d); 

      //Toggle the buttons' visibilty 
      $('#save').toggle(); 

      //Toggle the buttons' visibilty 
      $('#unsave').toggle(); 

     }, 
     type: 'POST'  
    }); 
}); 

나는 심지어 멋진 로딩 아이콘을 던졌습니다.