jquery-form.js這個插件來實現回調函數:
<form id="addform" method="post" action="請求接口地址" enctype="multipart/form-data" target="rfFrame">
<div >
<div >
<label for="customName" >廣告包名稱</label>
<div >
<input type="text" name="customName" id="customName" placeholder="廣告包名稱">
</div>
</div>
<div >
<label for="limited" >日限量</label>
<div >
<input type="text" name="limited" id="limited" placeholder="每日下載次數">
</div>
</div>
<div >
<label for="file" >URL地址</label>
<div >
<input type="file" name="file" id="file">
</div>
</div>
<!-- /.box-body -->
<div >
<label for="submit" ></label>
<div >
<button type="button" id="submit" >提交</button>
</div>
</div>
<!-- /.box-footer -->
</form>
<iframe id="rfFrame" name="rfFrame" src="about:blank" ></iframe>
注意:target="rfFrame"調取的是下面這個iframe的id值。作用是為了提交表單時防止頁面跳轉;表單要上傳文件時需設置屬性enctype="multipart/form-data",具體原因不太清楚;
好了,現在要上jquery-form.js 的提交代碼了:
$("#submit").click(function(){
var options = {
url:請求接口地址, //同action
type:'post',
beforeSend:function(xhr){//請求之前
var index = layer.load(1, {
shade: [0.5,'#000'] //0.5透明度的黑色背景
});
},
success:function(data)
{
},
complete:function(xhr){//請求完成
layer.closeAll('loading');
//詢問框
layer.confirm('廣告主修改成功!頁面將跳轉到列表頁。', {
btn: ['確定'] //按鈕
}, function(){
location.href = "adList.html";//location.href實現客戶端頁面的跳轉
});
},
error: function(xhr,status,msg){
//alert("狀態碼"+status+"; "+msg)
layer.msg('玩命加載中..');
}
};
$("#addform").ajaxSubmit(options);
});
另外說明一下,如果沒有上傳文件的話,完全可以使用ajax請求就好了,沒必要這么折騰。那也就說明 ajax請求不能夠上傳文件,ajax只能傳遞文本類信息。