1 、引入依賴腳本
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依賴腳本
腳本下載地址
http://download.csdn.net/detail/yjqyyjw/9488464
2、使用方法
//1、回調函數使用方法
$('#form1').ajaxForm(function() {
$('#output1').html("提交成功!").show();
});
$('#form1').ajaxSubmit(function() {
$('#output2').html("提交成功!").show();
});
//2、option對象使用方法
var ajax_option={
target: '#output', //把服務器返回的內容放入id爲output的元素中
beforeSubmit: showRequest, //提交前的回調函數
success: showResponse, //提交後的回調函數
url: url, //默認是form的action, 如果申明,則會覆蓋
type: type, //默認是form的method(get or post),如果申明,則會覆蓋
dataType: null, //html(默認), xml, script, json...接受服務端返回的類型
clearForm: true, //成功提交後,清除所有表單元素的值
resetForm: true, //成功提交後,重置所有表單元素的值
timeout: 3000 //限制請求的時間,當請求大於3秒後,跳出請求
};
//formData: 數組對象,提交表單時,Form插件會以Ajax方式自動提交這些數據,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery對象,封裝了表單的元素
//options: options對象
function showRequest(formData, jqForm, options){
var queryString = $.param(formData); //name=1&address=2
var formElement = jqForm[0]; //將jqForm轉換爲DOM對象
var address = formElement.address.value; //訪問jqForm的DOM元素
return true; //只要不返回false,表單都會提交,在這裏可以對錶單元素進行驗證
};
function showResponse(responseText, statusText){
//dataType=xml
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
$("#xmlout").html(name + " " + address);
//dataType=json
$("#jsonout").html(data.name + " " + data.address);
};
$('#form1').ajaxSubmit(ajax_option);
3、實戰
html 部分
<!-- 表單中若無文件上傳,可不寫enctype="multipart/form-data" -->
<form id="from1" name="from1" action="#" method="post" class="form-horizontal" enctype="multipart/form-data">
<button type="button" id="save" class="btn blue">保存</button>
<button type="button" id="cancel" class="btn">取消</button>
</form>
js 部分
var ajax_option={
url:"gfan_yyq!images_edit_save.action",
success:function(data){
var result = $.parseJSON(data);
if (result.success) {
var index = parent.layer.getFrameIndex();
var parentWin = parent;
parent.layer.msg(result.message, 1, 1, function(){
parentWin.layer.close(index);
parentWin.window.location.href=parentWin.window.location.href;
});
} else {
parent.layer.msg(result.message, 1, 3);
}
}
};
$('#save').click(function(){
alert(123);
$('#from1').ajaxSubmit(ajax_option);
});
$('#cancel').click(function(){
var index = parent.layer.getFrameIndex();
parent.layer.close(index);
});
4、總結ajaxSubmit 和ajaxForm區別
ajaxForm不能提交表單。在document的ready函數中,使用ajaxForm來爲AJAX提交表單進行準備。提交動作必須由submit開始
ajaxSubmit 馬上由AJAX來提交表單。你可以在任何情況下進行該項提交。