使用 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裡面除了errorsuccess兩種狀態之外,還有其他狀態可以使用,例如:

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

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

 

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

 

其他相關文章參考:

Javascript讀取XML 

使用JSONP傳資料 ? 

使用 AJAX 記錄點擊次數 

 

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

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

 

 

 

arrow
arrow

    newaurora 發表在 痞客邦 留言(2) 人氣()