首页 > 其他分享 >form表单提交拿到返回值

form表单提交拿到返回值

时间:2023-11-30 15:59:30浏览次数:27  
标签:iframe form 表单 提交 返回值 属性

通过form的action属性提交表单,这个很容易。但是,由于这种方式是同步提交,所以会导致页面跳转,且不好拿到返回值。一般都用ajax代替。
有些情况ajax是不能使用的,严格的说是不好使用的。例如文件上传功能。
<input type = "file">

通过form的action属性提交表单,并接收处理返回值的方法如下

点击查看代码

<iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
<form action="aaa.json" target="iframeContent">
<input type="text" id="userName"/>
<input type="text" id="passWord"/> 

这个方法是这样的。

  • 首先,写一个iframe,并且给iframe display:none;
    form元素有一个target属性用于指定提交后跳转到哪个页面。所以指定target属性为iframe的name。这样的话返回值会存到iframe中。结构是这样的
    <iframe>
    <pre>{"code": "01"}</pre>
    </iframe>

  • 其次,通过js监听iframe的load事件。如果iframe加载完成,就会触发load事件。这样一旦有数据返回就会触发事件。

  • 获取返回的数据,并处理返回的数据。

$("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML

标签:iframe,form,表单,提交,返回值,属性
From: https://www.cnblogs.com/luo9tian/p/17867519.html

相关文章

  • 【LLM】A Survey of Techniques for Maximizing LLM Performance
    本文成文于11月底,openaidevday之后背景:OpenAI最近放出了Devday的闭门会视频,其中"ASurveyofTechniquesforMaximizingLLMPerformance"(精进大型语言模型性能的各种技巧)是非常有价值的,本文对这次分享做摘要。视频:https://www.youtube.com/watch?v=ahnGLM-RC1Y&ab_channe......
  • 论文:Predicting the performance of green stormwater infrastructure using multivar
    题目“Predictingtheperformanceofgreenstormwaterinfrastructureusingmultivariatelongshort-termmemory(LSTM)neuralnetwork”(AlMehedi等,2023,p.1)(pdf)“基于多元长短期记忆(LSTM)神经网络的绿色雨水基础设施性能预测”(AlMehedi等,2023,pp.-)......
  • Angular velocity formulas
    Thisangularvelocitycalculatorusestwodifferentangularvelocityformulasdependingonyourinputparameters.Thefirstangularvelocityequationisanalogoustotheequationforlinearvelocity:The**firstangularvelocity**equationisanalogous......
  • HTML-Input 表单
     浏览器兼容性的原因,在这里推荐使用谷歌1.input表单介绍:用于与用户交互,收集信息。(收集不同类型的用户输入)2.input表单组成:①表单信息:提示用户操作(如何输入,怎样输入)②表单控件:文本输入框、复选框、按钮③表单域:表单信息和表单控件都在域里。可......
  • Golang Gin 获取Restful参数、URL查询参数,Form 表单参数,JSON格式参数
    前言http请求中,可以通过URL查询参数提交数据到服务器,可以通过post的json方式,还有一直方式就是Form表单。Form表单相比URL查询参数,用户体验好,可以承载更多的数据,尤其是文件上传时,特别方便。这里推荐飞雪无情的博客;写了一些列的gin的使用教程,很时候新手学习如果想对gin有一个完整......
  • JS对象文档 - FormData
    前言FormData接口提供了一种表示表单数据的键值对key/value的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send()方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为"multipart/form-data",它会使用和表单一样的格式。正文构造函数constformData=n......
  • element-plus之form表单场景大全
    1.:validate-event="false"的作用是,当前这个表单change或者blur的时候不进行表单校验,只有提交按钮验证时候才校验标红框,场景运用:当切换其他tab也好,根据select1选的值,然后给select2赋值,结果没查到select2为空数组时候自动标红,类似这种不想要红的可以处理<el-select......
  • C#winform备件管理系统项目
    1,该项目开发环境介绍:该项目采用visualstudio 2019 , 控件DevExpress  ,数据库SQLserver2019。2:项目截图展示3:该项目包含以下功能该项目主要包含以下功能:备件新增,入库,出库,信息维护,领用,部门管理,人员管理,权限设置,设备管理,数据库备份,系统日志,备件盘点。界面皮肤自由切换,数据导入......
  • Meta对Transformer架构下手了:新注意力机制更懂推理
    前言 作者表示,这种全新注意力机制(Sytem2Attention)或许你也需要呢。本文转载自机器之心仅用于学术分享,若侵权请联系删除欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结、最新技术跟踪、经典论文解读、CV招聘信息。CV各大方向专栏与各个部署框架最全教程整理【CV技术......
  • hackthebox format medium walkthrough
    walkthough 1.Wemustbrowsethewebsiteandlookupthebusinesspointforthewebpage.atthisboxwecanfindthecoderepository.codeauditinganddiscoveringtheprivilegeescalatedthroughtheRedisUnixsockvulnerability.2.Afterprivilegeescalat......