表单不刷新提交,非ajax

ThinkPHP+AJAX表单提交 表单代码: 提交按钮不能为submit类型的,而且提交按钮要在表单外部。 (本人没注意到这个问题,导致ajax发送成功后还会再刷新一下页面,困扰了大半天。) 我这里面的性别那一段代码的选择方式,有js操作,请忽略掉。 <form action="" method="" id="prform"> <div class="loginForm"> &lt... 阅读详情

现在AJAX横行,也许很少有人用隐藏form提交来实现不刷新页面更新了,在AJAX以前,一般都用隐藏form提交来实现页面不刷新提交数据.

现在对比一下ajax与隐藏form提交的利与弊。
1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理;ajax则不用,可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。
2.ajax出于安全性考虑,不能对文件进行操作,所以不能通过ajax来实现文件上传,而通过隐藏form提交可以实现这个功能,所以这就是用隐藏form提交的主要用途。
接下来讲述如何通过隐藏form来实现提交数据。

第一步:
<iframe  name="issueFrameList" frameborder=0 width="100%" height="400" scrolling="no">
</iframe>           //用于存放提交返回后的空白页面
<s:form id="issueFormList" action="searchIssue_searchIssue" target="issueFrameList" method="post">
</s:form>           //用于指定提交返回页面显示在这个iframe中
第二步:
document.issueFormList.submit();

提交后,进入后台处理完成(issues = issueManager.getAll();),返回一个jsp页面(aa.jsp),这个页面在iframe中生成.
<c:set var="issueCheckAll"><input type="checkbox"   id="issueCheckAll" onclick="javascript:checkall();" /></c:set>
 <display:table name="issues" class="simple" requestURI="" id="issueList" export="false" pagesize="10">
  <display:column  headerClass="checkbox" title="${issueCheckAll}" style="width:5">
   <input type=checkbox name="check" id="issueCheck" value="${issueList.id} : ${issueList.name}" />
  </display:column>
  <display:column   titleKey="bug.html.issue.proId" style="width:30%">${issueList.id}</display:column>
  <display:column   titleKey="bug.html.issue.summary" maxLength="20" style="width:70%"><c:out value="${issueList.name}"/></display:column> 
 </display:table>
<script type="text/javascript">
 function checkall() {
  checkAll(document.getElementById("issueCheckAll"),"issueCheck");
 }
 function checkData() {
  $("#issueCheckAll").removeAttr("checked");
  return $("input:checked[type=checkbox][name=check]");
 }
</script>

第三步:
可以通过parent对象对原页面进行操作,比如原页面定义了updatePageFromSubmit()方法,
则在aa.jsp页面中通过parent.updatePageFromSubmit()来进行提交后的处理.
原页面也可以issueFrameList.checkData()来调用aa.jsp页面中的方法。

使用Ajax提交form表单不进入回调函数的Bug解决 情景再现 如题,今天博主在写项目时,需要使用Ajax提交form表单来更新数据,具体要求是: 点击修改按钮触发弹出一个包含form表单的弹出层(是不是弹出层其实没有关系) 修改信息后提交 告诉用户是否修改成功,并自动关闭弹出层 于是博主使用Ajax来提交form表单,在controller里判断是否修改成功,成功则返回1,失败则返回0,这个返回值继续传到Ajax的回调函数里的msg,使用if语... 阅读详情

相关推荐

3DMax马克杯制作教程

01 在前视图创建一个【圆柱体】,设置参数,长度为32,高度为82;高度分段12、边数为16;如图所示。 02 点击鼠标右键,把圆柱体转换为可编辑多边形,如图所示。 03 在修改面板中,选择【多边形】层级,在视图中选择所示的面,使用缩放工具稍微缩小一点,如图所示。 04 点击【插入设置】,如图所示。 设置插入数量为2.5mm。 05 点击【挤出设置】,如图所示。 ...

youximoxingEDO的博客 3478

后台接口返回文件流前端实现文件下载

前因:传参后发起post请求,后台接口返回的是二进制文件流,接收的内容如图: 后果:将接收到的文件流直接下载并保存到本地。 要下载的文件是一个.zip 压缩包。 按一般方式请求后台接口,打印接口返回的内容: 下载方法: dwonload() { if (this.$refs.checkIssueForm('ruleForm')) { let params = { remark: this.remark } this.$ajax.post('/api/downloa

风如也的博客 1万+

【Aseprite】制作Unity2D瓦片地图素材(平台游戏)

本文章用于记录用Aseprite软件制作2D平台游戏的瓦片地图的方法。

凡心所向,素履以往 5545

js - form表单提交不刷新

大家已经发现了,当我们点击submit提交form表单的时候, 他会刷新一次,如果不想它刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏的iframe来实现,主要是我们把提交目标放到一个隐藏的iframe里,然后让iframe提交数据 (ps: 这个未实测,仅仅是网上提供的,我记录一下.以后遇到或者会试一下吧) <form action="...

yuuuuchang的博客 3万+

告别GIS软件!用R语言ggplot2+ggmapcn绘制出版级世界地图(附5种投影对比图)

本文提供了一份完整的实践指南,教你如何利用R语言及其强大的ggplot2生态系统,结合ggmapcn包,绘制出出版级的世界地图。文章详细对比了五种经典地图投影(如摩尔维德、罗宾森投影)的代码实现与视觉差异,并讲解了如何添加比例尺、指北针等专业元素,最终导出高清PDF,实现从数据分析到专业可视化的全流程代码化操作,彻底告别传统GIS软件。

p5l2m9n4o6q的博客 407

蓝凌EIS智慧协同平台frm_form_upload.aspx接口存在任意文件上传漏洞

蓝凌EIS智慧协同平台frm_form_upload.aspx接口存在任意文件上传漏洞

nnn2188185的博客 357

html form表单提交后不刷新不跳转的实现方法------巧妙地用iframe

在默认情况下, 提交form表单后, 是有刷新的。 但是, 有的时候, 希望提交表单后不要刷新, 免得把页面已经有的东东给刷跑了, 那怎么搞呢(最近刚好碰到)? 实例代码如下:         经测试, 实现了功能。 点击提交后, 不跳转, 不刷新, 靠谱。

认知 行动 坚持 3万+

ShaderJoy —— 简单又神奇的 “合体” 函数【GLSL】

smin 函数 它实际上有两种常见的实现方式 多项式 指数 多项式 smin 函数图 其对应的代码为 float smin( float a, float b ) { // 多项式 const float k = 0.5; float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); } 从上图中我们可以很明显的看出有两处不连...

ShaderJoy 的兴趣技术杂货铺 1857

怎么实现表单提交后不重新刷新当前页面

如何实现表单提交后不重新刷新当前页面       当我点击保存提交FORM表单后,如何让当前页面维持不变(即不刷新当前页)? 在FORM表单后添加一个iframe,即<form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post' target="rfFrame">

melody_day的博客 2万+

Cesium教程(十七):淹没分析

淹没分析是根据某片区域的地形及洪水流量速度,动态模拟该地形区域水位逐渐上涨的淹没过程。该功能可适用于山区、丘陵等地形起伏较大区域,模拟洪水涨到安全限定高度的淹没过程,为防洪水救灾提供一定的参考。此外,还可以为河谷地带修建水利工程设计与选址提供参考依据。

WwLK123的博客 3008

7.18 GART 与 GPUVM 对比:一颗 GPU 上两套页表的分工

本文横向对比AMD GPU上并存的GART与GPUVM两套页表。GART为内核专用,全局单一,线性单层结构,CPU同步直写;GPUVM为每进程48位地址空间,四级页表,含并发状态机,支持隔离与迁移。二者通过VMID区分,共享GMC硬件与PTE编码,分工互补。

图形/计算GPU的驱动与虚拟化技术分享园地 387

非ajax方式提交表单不刷新页面

Ajax最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息。那么用AJAX进行后台通信传递字符串还是可以的,遇到上传文件该怎么办呢?基于安全考虑,JS是不能直接进行文件操作的,只好用原始的from来提交文件上传了。这样一来,用form不就要刷新页面了吗?其实也不是。 这是网上找的一个一般通用的处理方法 给我们的from加一个target属性,并且将这个属性的值设置为隐藏的iframe的...

liwb94的博客 358

Qt C++ 信号发生器控制软件

waveformComboBox->addItems({"正弦波", "方波", "三角波", "锯齿波", "脉冲波"});frequencyLabel = new QLabel("频率 (Hz):");amplitudeLabel = new QLabel("幅值 (V):");offsetLabel = new QLabel("直流偏移 (V):");} else if (currentWaveform == "三角波") {} else if (currentWaveform == "方波") {

寒寒豆豆软件公司的博客 125

ajax进行post请求提交表单后刷新页面会带上参数信息

我的个人网站: http://riun.xyz 场景:页面form表单不做提交,在提交按钮input里添加点击事件,调用js方法,js方法里面使用ajax进行post提交,提交后处理结果,正常的话就刷新页面,刷新页面时页面地址栏会带上参数信息。 解决:将提交按钮的input的type='submit’改为type=‘button’ ...

hanhanhanxu的博客 1429

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

smartupload ajax上传文件,Ajax方式提交带文件上传的表单及隐藏iframe应用

一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦。基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数据提交成功之后的回调函数中,通过form单独提交文件,而这个提交文件的form的target就指向前述隐藏的iframe。html 代码支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传functionca...

weixin_31920157的博客 267

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

ajax禁用怎么设置,如何禁用/启用形式Ajax请求

一旦您在提交按钮上返回false,显然您不能再次调用提交操作,因为表单现在无法提交信息。的另一种解决方案是使用的onclick功能,如下图所示:JavaScript文件function savecustomquestion(){$.ajax({type : 'POST',url : 'customquestion.php',data:{tablename:$('#productname').val...

weixin_34757565的博客 641

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

告别页面刷新!如何使用AJAX和FormData优化Web表单提交

在Web开发中,表单是与用户交互的重要工具之一,它不仅是用户输入信息的主要方式,也是与后台服务器交换数据的桥梁。传统的表单提交方式通过刷新页面来实现数据传递,但这种方式往往会影响用户体验,尤其是在需要频繁提交数据时。随着AJAX和FormData的出现,Web开发者能够在不刷新页面的情况下异步提交数据,极大地提升了用户体验和系统效率。本文将带你深入探讨如何通过AJAX提交表单数据,避免传统表单提交的缺点,如何使用FormData对象高效处理和提交表单数据,尤其是在需要上传文件的场景下。

吴师兄大模型的博客 1665

通过submit提交的表单怎么实现ajax提交

通过ajax实现对submit表单的提交   我们知道,ajax提交是不能使用submit的,如果用submit会直接跳过ajax提交。如果你一定要用submit来提交表单,并且又要使用ajax实现表单的提交,就将submit的返回值设置为false。   submit提交表单,如果返回为true,表单直接提交;返回为false,表单就不提交(这时候就可以交给ajax来实现表单提交了)   submit提交,又要使用ajax提交表单,需要在submit提交的时候返回false,将其拦截下来,使其不提交,然后

Java小皮孩 3202

jQuery实现Ajax方式提交表单

提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单。下面完整的介绍一个表单采用ajax方式提交的流程。 一、准备 1、页面引入jQuery文件 2、页面引入jQuery的表单插件jQuery.form.js 二、实施

仰望星空的代码 7万+

Form表单提交和ajax提交的区别

基本介绍 在做web开发时需要从前端向后台提交数据,常见的方式有Form表单提交和ajax提交两种,基本写法如下: form提交: <div id="form-div"> <form id="form1" action="/user/login" method="post"> <p><span>用户名:</span&...

yoyoseng的博客 2966

php form表单提交不刷新,Form提交表单页面刷新不跳转本

如何在 form 表单提交后实现页面不跳转用ajax 提交 不要用提交按钮 用普通按钮 按钮的 click事件中 进行ajax 就可以 function sub(){var name= $("#uname").value();$.ajax({ url:url, data:{uname:name}, complete:function (data){ // 这里获取后台数据 DATA 刷新当前页面的...

weixin_36484519的博客 1328

Form 表单提交 和 Ajax 表单提交 的一些区别

自己一些心得体会: 1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台 ajax 表单提交,是可以局部提交,具有ajax的所有属性。。。 引用: 上述两种提交方式的区别和适用场景说明 情况一:提交并刷新当前页面,或者提交后跳转到其他页面。 情况二:提交数据并展示后台返回的处理信息。 情况一比较适合采用FORM提...

shihx7的博客 3242

模拟 AJAX 提交 form 表单及请求头设置详解

场景不使用 encodeURIComponent ()使用 encodeURIComponent ()参数包含空格空格被转换为(部分浏览器)或保留为空格(可能导致错误)空格被编码为%20,所有服务器都能正确解析参数包含 & 符号服务器将其解析为参数分隔符,导致参数拆分错误& 被编码为%26,作为参数值的一部分被正确传递参数包含 = 符号服务器将其解析为键值对分隔符,导致参数结构混乱= 被编码为%3D,作为参数值的一部分被正确传递参数包含非 ASCII 字符。

m0_73941339的博客 2066

jquery 非ajax表单提交

最近再写一个表单的时候,忽然不想用ajax向后台传值。记得jquery也有submit的方法,直接提交就完了。于是,开写代码。 <form id="myForm" action="url" method="post"> <div> 您的姓名 <label> ...

长歌的博客 607
上一篇: div的使用
下一篇: jquery解析XML文件
java20100406
博客等级 码龄16年 23粉丝 62原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值