2015年10月6日 星期二

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