如何使用AJAX傳值

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

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

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

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

 

 

 

 

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

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

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

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

 

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

 

 

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 都會執行這個區塊的程式

 

如果覺得對你有幫助的話. 請幫小弟按個讚吧～

 

其他相關文章參考：

Javascript讀取XML 

使用JSONP傳資料 ? 

使用 AJAX 記錄點擊次數 

 

更多的內容可以參考這裡：

http://api.jquery.com/jQuery.ajax/