form表单只提交数据而不进行页面跳转的解决方案
转载
将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢?利用jquery的ajaxSubmit函数以及form的onsubmit函数完成
一般的form提交操作写法为:
<form action="saveReport.htm" method="post"> …… <input type="submit" value="保存报告"/> </form>
<form action="{{ url_for('zapapi.zap_task_delete') }}" method="post" style="display: inline"> <input name="session_name" value="{{ i[2] }}" type="hidden"> <input name="zap_server_addr" value="{{ i[3] }}" type="hidden"> <button id="scan_log_delete{{ i[2] }}" class="btn red" type="submit" name="delete" value="delete"><i class="icon-remove"></i> 删除</button></form>
点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面
如何做到
将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢??
这种需要在load一个页面的时候尤其迫切。
利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下:
<form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();"> <input type="submit" value="保存报告"/> </form>
<form id="stopstart{{ i[2] }}" onsubmit="return Stop{{ i[2] }}()" style="display: inline"><button id="startstop{{ i[2] }}" class="btn yellow" type="submit" name="stop" value="stop"><i id="start_stop{{ i[2] }}" class="icon-stop"></i> 停止</button></form>
form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单
saveReport对应函数为 :
<script> function saveReport() { // jquery 表单提交 $("#showDataForm").ajaxSubmit(function(message) { // 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容 }); return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转 } </script>
<script>/*** @return {boolean}*/function Stop{{ i[2] }}() {$.ajax({type: "post",url: "{{ url_for('zapapi.zap_task_stop') }}",data: "session_name={{ i[2] }}&zap_server_addr="+$('#server{{ i[2] }}').text(),success: function(msg) {if(msg.success){alert(msg.message)$('#report{{ i[2] }}').removeAttr('disabled');$('#startstop{{ i[2] }}').text("启动");$('#startstop{{ i[2] }}').removeClass('yellow');$('#startstop{{ i[2] }}').addClass('blue');$('#startstop{{ i[2] }}').prepend('<i id="start_stop{{ i[2] }}"></i>');$('#start_stop{{ i[2] }}').addClass('icon-play');$('#stopstart{{ i[2] }}').attr({"onsubmit": "return Start{{ i[2] }}()"})$('#basic_opener{{ i[2] }}').text("申请");$('#basic_opener{{ i[2] }}').removeClass('green');$('#basic_opener{{ i[2] }}').addClass('gray');$('#basic_opener{{ i[2] }}').prepend('<i id="icon{{ i[2] }}"></i>');$('#icon{{ i[2] }}').addClass('icon-plus');$('#server{{ i[2] }}').text("");$('#form{{ i[2] }}').removeAttr('onsubmit');$('#form{{ i[2] }}').attr({"onsubmit": "return ZAP_SERVER_APPLY{{ i[2] }}()"});} else {alert(msg.message)}}});return false;}</script>
form表单只提交数据而不进行页面跳转的解决方案相关推荐
- jQuery中ajax用form表单方式提交数据
给表单加ID值,如图: 写ajax方法,如图: servlet返回是否添加成功,如图: jsp页面 <div class="modal-content"><div ...
- 使用form 表单+aja提交数据无返回结果-你真的了解点击事件属性值submit和button吗?
下午写项目 遇到了一个问题 ,使用ajax提交数据,后台能拿到数据, 但是一直无法进入回调函数,浪费了一个多小时的时间都没有解决. 点击事件的时候,属性不能为submit. 因为属性submit会提交 ...
- form layui 同时提交多个对象_layui实现form表单同时提交数据和文件的代码
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- js实现Form表单submit提交截获数据(各浏览器通用)
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
- form表单同时提交带文本和图片的数据
方法一:使用ajax异步提交 此种方法的好处是可以回调响应结果. html代码: <form action="${basePath}/save" method="p ...
- 微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
- 使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
- form表单重复提交
现象: 后台完成数据库操作后返回到页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交 原因: 第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其它页面才消失,在自 ...
- 防止form表单重复提交的几种方案
阅读目录 前言 form重复提交场景 解决方案 一:前端利用JavaScript防止表单重复提交 二:利用Session防止表单重复提交 三:使用重定向也可以解决form表单重复提交问题 参考 前言 ...
最新文章
- System.PlatformNotSupportedException
- 五、redis和关系型数据库如何配合使用
- keepalived重新加载配置——不用重启不发生切换
- Python—实训day3—简单的在线翻译程序
- html文件查找关键词,批处理查找文件关键字下一行内容
- c语言创建文件的作用,c语言文件创建与建立
- tensorflow版PSENet 文本检测模型训练和测试
- WIN7下 VS2008 无法调试ASP.NET
- win7卡在正在启动windows界面_win7开机一直卡在欢迎界面如何解决?
- linux中so文件如何打开,安卓手机如何打开.so文件?
- 一生受用的8个国外电子书免费下载网站(值得收藏
- 网易云音乐 歌词制作软件 BesLyric
- A Neural Algorithm of Artistic Style : Neural Style Transfer with Eager Executon
- 计算机排名的985大学排名,最新985大学排名榜名单
- 小白必看!DIY装机,电脑显示器选购
- 用了服务器后网站统计代码被劫持,网站劫持代码,网站被劫持怎么办 | 帮助信息-动天数据...
- ‘The INSERT statement conflicted with the FOREIGN KEY constraint “FK_TourismReservation_Users“. The
- Node.js 模块化的操作,简单明了的代码帮助你明白后端的实现和前端之前的交互,及解决跨域等问题
- 学生免费申请JetBrains许可证
- java入门好学吗_java好学吗?我是小白中的小白,零基础...