form組件的提交函數(shù)由什么組成?
jquery-form.js這個(gè)插件來實(shí)現(xiàn)回調(diào)函數(shù):
<form id="addform" class="form-horizontal" method="post" action="請求接口地址" enctype="multipart/form-data" target="rfFrame">
<div class="box-body">
<div class="form-group">
<label for="customName" class="col-sm-2 control-label">廣告包名稱</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="customName" id="customName" placeholder="廣告包名稱">
</div>
</div>
<div class="form-group">
<label for="limited" class="col-sm-2 control-label">日限量</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="limited" id="limited" placeholder="每日下載次數(shù)">
</div>
</div>
<div class="form-group">
<label for="file" class="col-sm-2 control-label">URL地址</label>
<div class="col-sm-6">
<input type="file" name="file" id="file">
</div>
</div>
<!-- /.box-body -->
<div class="form-group">
<label for="submit" class="col-sm-2 control-label"></label>
<div class="col-sm-2">
<button type="button" id="submit" class="btn btn-primary">提交</button>
</div>
</div>
<!-- /.box-footer -->
</form>
<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
注意:target="rfFrame"調(diào)取的是下面這個(gè)iframe的id值。作用是為了提交表單時(shí)防止頁面跳轉(zhuǎn);表單要上傳文件時(shí)需設(shè)置屬性enctype="multipart/form-data",具體原因不太清楚;
好了,現(xiàn)在要上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('廣告主修改成功!頁面將跳轉(zhuǎn)到列表頁。', {
btn: ['確定'] //按鈕
}, function(){
location.href = "adList.html";//location.href實(shí)現(xiàn)客戶端頁面的跳轉(zhuǎn)
});
},
error: function(xhr,status,msg){
//alert("狀態(tài)碼"+status+"; "+msg)
layer.msg('玩命加載中..');
}
};
$("#addform").ajaxSubmit(options);
});
另外說明一下,如果沒有上傳文件的話,完全可以使用ajax請求就好了,沒必要這么折騰。那也就說明 ajax請求不能夠上傳文件,ajax只能傳遞文本類信息。