Переключение между кнопками с помощью jQuery и Ajax

Question

У меня есть две кнопки, Сохранить и Отменить. Как правило, мне приходилось каждый раз заходить на страницу постов PHP, и это обновляло страницу. Если вы нажмете «Сохранить», страница будет обновлена, и отобразится только «Не сохранено» - и наоборот.

Я пытаюсь сделать это с 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";
            }

Как я могу сделать это без обновления страницы, с чистым Ajax + 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'     
    });
});

Я даже добавил хороший значок загрузки для вас.