如何使用AJAX傳值

用 AJAX 的方式傳資料，其實相當容易

最大的好處就是不用更新頁面，就可以把資料傳送出去，同時也可以把已經更新的資料接收回來

這邊是使用AJAX傳送資料的方法

首先需要一個基本的HTML表單，提供使用者填寫，填寫後送出

<!-- HTML表單語法如下 -->

<form id="message_form" method="POST">

  <table id="message_table">

    <tr><td>username:</td><td>

    <input type="text" name="username" id="username"/></td></tr>  

    <tr><td>message:</td><td>

    <input type="text" name="message" id="message"/></td></tr>

    <tr><td>

     <input type="button" id="submit_message" value="送出" onClick="messageGo();"/>   

     </td></tr>

  </table>

 </form>

特別要注意的是幾個地方：

1. 欄位ID須填寫清楚，且不能重複

2. 送出的onClick代表通知AJAX開始提交表單內容

HTML表單建立完成後，接著就是撰寫javascript語法

1. 必須引用 JQuery (基本上版本幾乎都支援)：

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

2. 提交表單事件

function messageGo(){

  //取得 "username" 欄位值

  var username = $('#username').val();        

   //取得 "message" 欄位值                                

  var message = $('#message').val();                                           

    $.ajax({

        //告訴程式表單要傳送到哪裡                                         

       url:"message.php",                                                              

        //需要傳送的資料

        data:"&message="+message+"&username="+username,  

         //使用POST方法     

        type : "POST",                                                                    

        //接收回傳資料的格式，在這個例子中，只要是接收true就可以了
        dataType:'json', 

         //傳送失敗則跳出失敗訊息      

        error:function(){                                                                 

        //資料傳送失敗後就會執行這個function內的程式，可以在這裡寫入要執行的程式  

        alert("失敗");

        },

        //傳送成功則跳出成功訊息

        success:function(){                                                           

        //資料傳送成功後就會執行這個function內的程式，可以在這裡寫入要執行的程式  

        alert("成功");

        }

    }); 

};

在AJAX裡面除了error、success兩種狀態之外，還有其他狀態可以使用，例如：

    beforeSend：可以在資料未傳送成功時執行其他程式，像是讓畫面出現loading的字(圖)樣

    complete ：在資料傳送完成後，不管是 error 或是 success 都會執行這個區塊的程式