介紹:介紹了如何將一個普通的form表單,迅速改造成通過ajax方式提交,並將結果顯示在對話方塊中。
本文:
我們有一個非常普通的表單:
<form id="form1" name="form1" method="get" action="post.html">
標題<input id="testtitle" name="testtitle" type="text" size="40" />
<input type="submit" value="提交">
</form>
為了示範方便,method使用了get,可以根據需要改為post。
現在我們把它改造成AJAX方式提交,方法很簡單,只需要將下面的代碼複製到頁面中:
<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<style>
#loading{background-image:url(images/loading.gif);background-position:0px 0px;background-repeat:no-repeat; position:absolute;width:50px;height:50px;top:60%;left:50%;margin-left:-25px;text-align:center;}
</style>
<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
bindSubmit();
$("#loading").hide();
$("#msgdlg").hide();
});
function bindSubmit() {
var options = {
target: '#msgdlg',
success: showResponse,
error: showError
// 其它選擇性參數:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax 選項,例如逾時:
//timeout: 3000
};
$('#form1').submit(function () {
$(this).ajaxSubmit(options);
$("#loading").show();
return false;
});
}
// 成功響應的回呼函數
function showResponse(responseText, statusText, xhr, $form) {
$("#loading").hide();
messagebox(responseText);
}
// 響應失敗
function showError(xhr, ajaxOptions, thrownError) {
$("#loading").hide();
messagebox("出錯了!" + thrownError);
}
// 顯示結果資訊的對話方塊
function messagebox(msg) {
$("#msgdlg").html(msg);
$("#dialog:ui-dialog").dialog("destroy");
$("#msgdlg").dialog({
modal: true,
width: 380,
height: 230,
buttons: {
確認: function () {
$(this).dialog("close");
}
}
});
}
</script>
<div id="msgdlg" title="訊息"></div>
<div id="loading" style="display:none" ondblclick="this.style.display='none'"></div>
代碼中關鍵的幾點:
(1)$('#form1').submit()對Form的Submit的綁定 (使用了jquery.form.js)
(2)定義的showResponse函數處理返回資訊。
(3)$("#msgdlg").dialog()建立對話方塊並顯示結果 (使用了jquery-ui.js)