转载

  将数据提交到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表单只提交数据而不进行页面跳转的解决方案相关推荐

  1. jQuery中ajax用form表单方式提交数据

    给表单加ID值,如图: 写ajax方法,如图: servlet返回是否添加成功,如图: jsp页面 <div class="modal-content"><div ...

  2. 使用form 表单+aja提交数据无返回结果-你真的了解点击事件属性值submit和button吗?

    下午写项目 遇到了一个问题 ,使用ajax提交数据,后台能拿到数据, 但是一直无法进入回调函数,浪费了一个多小时的时间都没有解决. 点击事件的时候,属性不能为submit. 因为属性submit会提交 ...

  3. form layui 同时提交多个对象_layui实现form表单同时提交数据和文件的代码

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...

  4. js实现Form表单submit提交截获数据(各浏览器通用)

    js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...

  5. form表单同时提交带文本和图片的数据

    方法一:使用ajax异步提交 此种方法的好处是可以回调响应结果. html代码: <form action="${basePath}/save" method="p ...

  6. 微信小程序表单提交php存储,微信小程序实现form表单本地储存数据

    本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...

  7. 使用ajax方法实现form表单的提交

    2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...

  8. form表单重复提交

    现象: 后台完成数据库操作后返回到页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交 原因: 第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其它页面才消失,在自 ...

  9. 防止form表单重复提交的几种方案

    阅读目录 前言 form重复提交场景 解决方案 一:前端利用JavaScript防止表单重复提交 二:利用Session防止表单重复提交 三:使用重定向也可以解决form表单重复提交问题 参考 前言 ...

最新文章

  1. System.PlatformNotSupportedException
  2. 五、redis和关系型数据库如何配合使用
  3. keepalived重新加载配置——不用重启不发生切换
  4. Python—实训day3—简单的在线翻译程序
  5. html文件查找关键词,批处理查找文件关键字下一行内容
  6. c语言创建文件的作用,c语言文件创建与建立
  7. tensorflow版PSENet 文本检测模型训练和测试
  8. WIN7下 VS2008 无法调试ASP.NET
  9. win7卡在正在启动windows界面_win7开机一直卡在欢迎界面如何解决?
  10. linux中so文件如何打开,安卓手机如何打开.so文件?
  11. 一生受用的8个国外电子书免费下载网站(值得收藏
  12. 网易云音乐 歌词制作软件 BesLyric
  13. A Neural Algorithm of Artistic Style : Neural Style Transfer with Eager Executon
  14. 计算机排名的985大学排名,最新985大学排名榜名单
  15. 小白必看!DIY装机,电脑显示器选购
  16. 用了服务器后网站统计代码被劫持,网站劫持代码,网站被劫持怎么办 | 帮助信息-动天数据...
  17. ‘The INSERT statement conflicted with the FOREIGN KEY constraint “FK_TourismReservation_Users“. The
  18. Node.js 模块化的操作,简单明了的代码帮助你明白后端的实现和前端之前的交互,及解决跨域等问题
  19. 学生免费申请JetBrains许可证
  20. java入门好学吗_java好学吗?我是小白中的小白,零基础...

热门文章

  1. 美团、饿了么,你凭什么让我多等几分钟?
  2. 照葫芦画瓢-python editors(编辑器 IDE)
  3. Oracle 10g RAC RMAN备份异机单实例恢复
  4. Centos6.5安装Seafile,遇到的问题处理记录。
  5. JS中的this对象详解
  6. Linux下的网络管理工具—OpenNMS
  7. 忘记Windows 7 登录密码,3分钟我来搞定
  8. python26 调用mysql 5.1
  9. 六种方法实现CSS三栏布局
  10. Go复盘--再识Go语言