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只能传递文本类信息;
转载于:https://www.cnblogs.com/AmilyWilly/p/7059253.html
form表单提交回调函数相关推荐
- form和ajax同时提交吗,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- web手动进行Form表单提交
最近的一个项目涉及到多文件上传,同时还不让用Form表单提交其他数据.蛋疼... 想到一个办法就是,先用ajax提交数据,然后返回数据库的id主键(mysql数据库),然后再js回调函数中进行表单文件 ...
- form表单提交后提示成功信息
jsp中的写法: <iframe id="registerIframe" name="registerIframe" src="" s ...
- ajax异步请求——form表单提交 及 表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- 表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJA ...
- Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式: 1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的 这种方式最近到一个form提供action路径后台接受就可以 & ...
- form表单提交数据如何拿到返回值
form表单提交数据如何拿到返回值 文章目录 form表单提交数据如何拿到返回值 @[TOC](文章目录) 前言 一.如何拿到返回值 二.在这个过程中也会遇到一些问题 总结 前言 使用form表单提交 ...
- vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
最新文章
- Error in lm.fit(x, y, offset = offset, singular.ok = singular.ok, ...): singular fit encountered
- 牛客第七场 Sudoku Subrectangles
- int a [] = {1,2,}; 允许使用怪异的逗号。 有什么特殊原因吗?
- 用span实现空格的精确设定 空格
- CentOS 6.3下配置LVM(逻辑卷管理
- html走马观花效果,走马观花台湾行 用EF-S 10-18来记录风景
- [UWP]了解模板化控件(4):TemplatePart
- c语言中 数组 左移,如何将一个数组的元素循环左移?
- Intel Core Enhanced Core架构/微架构/流水线 (5) - 分支预测/指令预取
- nlp-tutorial代码注释3-1,RNN简介
- CF1106F Lunar New Year and a Recursive Sequence(矩阵快速幂+bsgs+exgcd)
- 几款实用的linux工具
- accumulate函数
- 加密锁收集C2V文件更新文件
- php医疗管理系统(医院患者就诊档案管理系统)源码
- 项目管理系统应该具有哪些功能
- Linux开发学习资料库
- open with live serve和 open in default brower使用的需要注意路径
- 永磁同步电机三相等效电路图_同步电动机原理
- win10任务管理器cpu占用率显示不准的问题
热门文章
- 蓝桥杯 ALGO-150 算法训练 6-1 递归求二项式系数值 java版
- 1008. 数组元素循环右移问题 (20)-PAT乙级真题
- L1-025. 正整数A+B-PAT团体程序设计天梯赛GPLT
- 【已解决】运行Eclipse出错:Failed to load the JNI shared library
- Perl线程开发过程中的经验
- jQuery LigerUI 插件介绍及使用之ligerTree
- 一步步实现 Redis 搜索引擎 1
- 李洪强iOS开发之后使用XIB实现横向滚动的UIScrollView
- Linux命令之cut详解
- Learn the object-c on MAC(中译本: Object-C 基础教程 ) 学习笔记