1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > form表单提交回调函数

form表单提交回调函数

时间:2020-12-31 13:40:49

相关推荐

form表单提交回调函数

form表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数:

<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="每日下载次数">

</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"调取的是下面这个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只能传递文本类信息;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。