用 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',
dataType:'json',
//傳送失敗則跳出失敗訊息
error:function(){
//資料傳送失敗後就會執行這個function內的程式,可以在這裡寫入要執行的程式
alert("失敗");
},
//傳送成功則跳出成功訊息
success:function(){
//資料傳送成功後就會執行這個function內的程式,可以在這裡寫入要執行的程式
alert("成功");
}
});
};
在AJAX裡面除了error、success兩種狀態之外,還有其他狀態可以使用,例如:
beforeSend:可以在資料未傳送成功時執行其他程式,像是讓畫面出現loading的字(圖)樣
complete :在資料傳送完成後,不管是 error 或是 success 都會執行這個區塊的程式