JQuery中基本的AJAX教學請參考: http://expect7.pixnet.net/blog/post/37919326
如果有需要loding中的圖示請參考: http://expect7.pixnet.net/blog/post/39827699
範例程式下載: http://www.megaupload.com/?d=QB8F68VI

其實讓畫面顯示正在處理中並沒有太複雜,只要你對於基本的JQuery AJAX有點了解就可以寫出來了。

他的關鍵是在於JQuery AJAX 中的 complete, beforeSend 這兩個參數。

complete: 請求完成時執行的函式(不論結果是success或error)。
beforeSend:發送請求之前會執行的函式。

以下就是範例

index.html


<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script>
        var Submit=function(){
            var URLs="back.php";
           
            $.ajax({
                url: URLs,
                data: $('#sentToBack').serialize(),
                type:"POST",
                dataType:'text',
                success: function(msg){
                    alert(msg);
                },
               
beforeSend:function(){
                    $('#loadingIMG').show();
                },
                complete:function(){
                    $('#loadingIMG').hide();
                },

                error:function(xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
                }
            });
        }



        </script>
    </head>
    <body>
     <form id="sentToBack">
            <input type="text" name="Text"/>
            <input type="button"  value="送出" onClick="Submit()"/>
        </form>
        <div id=" loadingIMG" style="display:none"><img src="loading.gif" height='14'/>資料處理中,請稍後。</div>
    </body>
</html>

 

一開始把 loadingIMG 設定為不可被看見(隱藏),當你按下 送出按鈕後,他會去執行Submit()的函數。其後執行ajax的運作。
當他開始運作的時候,會先去執行beforeSend裡面的function,這時會把
loadingIMG顯示出來( $('#loadingIMG').show();),當執行完成之後,不論是成功或是有錯誤,都會去執行complete,在去把 loadingIMG隱藏起來( $('#loadingIMG').hide();)。

如果要測試的話,可以在這個範例的back.php中寫入sleep(10),讓這支PHP休息10秒再繼續執行,這樣就能看到明顯的效果了。

<?php

sleep(5);
echo "dd";

?>

  後記:我還有寫一篇相關的,可以參考- http://expect7.pixnet.net/blog/post/44966959