使用form表单的action提交并接收后端返回的消息

使用form表单的action提交表单是同步提交的方式,会跳转页面,所以无法获取后端返回来到消息。这样描述或许没有太大感觉,如果我要通过表单的方式上传文件,并接收后台返回来的响应数据;这样说是不是就感同深受了呢。

1. 在form标签上添加一个 target 属性,属性值指向 <ifream></ifream> 标签的name 属性。target 属性也就是当表单提交后,会自动跳转到 target 对应的地址上。这里表示提交表单后,跳转到ifream 层。

2. 添加一个  <ifream></ifream> 标签,并添加行内样式使其为不可见状态(dispaly: none)

3.  接收响应消息的 js 如下

//提交申请单后接收响应消息
$("iframe[name=iframeContent]").on("load", function() {var responseText = $("iframe")[0].contentDocument.body.innerHTML;const jsonResponse = JSON.parse(responseText);if (jsonResponse.code == 0) {layer.open({title: '提示', icon: '1', content: jsonResponse.msg, time: 2000, end: function () {window.close();   // 关闭表单页面}});} else {layer.alert(jsonResponse.msg, {title: '申请失败', icon: 5, time: 5000});}});

整体流程就是:当提交表单后,会自动跳转到 <form> 标签内 target 属性值对应的地址上,即在 ifream 层,这样返回的结果就存在了 ifream 层。通过监听 ifream 层的 load 事件,ifream 加载完成就会触发 load 事件,有数据就会获取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/461957.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

曹操出行借助 ApsaraMQ for Kafka Serverless 提升效率,成本节省超 20%

本文整理于 2024 年云栖大会主题演讲《云消息队列 ApsaraMQ Serverless 演进》&#xff0c;杭州优行科技有限公司消息中间件负责人王智洋分享 ApsaraMQ for Kafka Serverless 助力曹操出行实现成本优化和效率提升的实践经验。 曹操出行&#xff1a;科技驱动共享出行未来 曹操…

2024年10月文章一览

2024年10月编程人总共更新了21篇文章&#xff1a; 1.2024年9月文章一览 2.《Programming from the Ground Up》阅读笔记&#xff1a;p147-p180 3.《Programming from the Ground Up》阅读笔记&#xff1a;p181-p216 4.《Programming from the Ground Up》阅读笔记&#xff…

【果蔬识别】Python+卷积神经网络算法+深度学习+人工智能+机器学习+TensorFlow+计算机课设项目+算法模型

一、介绍 果蔬识别系统&#xff0c;本系统使用Python作为主要开发语言&#xff0c;通过收集了12种常见的水果和蔬菜&#xff08;‘土豆’, ‘圣女果’, ‘大白菜’, ‘大葱’, ‘梨’, ‘胡萝卜’, ‘芒果’, ‘苹果’, ‘西红柿’, ‘韭菜’, ‘香蕉’, ‘黄瓜’&#xff09;…

Partition架构

优质博文&#xff1a;IT-BLOG-CN Partition架构 【1】结构&#xff1a; Region至少3个Zone&#xff0c;Zone内至少两个Partition&#xff0c;Partition内至少1个K8S Member Cluster&#xff1b; 【2】故障域&#xff1a; 故障域及核心链路至少Zone内收敛&#xff0c;甚至Part…

xlrd.biffh.XLRDError: Excel xlsx file; not supported

文章目录 一、问题报错二、报错原因三、解决思路四、解决方法 一、问题报错 在处理Excel文件时&#xff0c;特别是当我们使用Python的xlrd库来读取.xlsx格式的文件&#xff0c;偶尔会遇到这样一个错误&#xff1a;“xlrd.biffh.XLRDError: Excel xlsx file; not supported”。…

Java XML一口气讲完!(p≧w≦q)

Java XML API Java XML教程 - Java XML API SAX API 下面是关键的SAX API的摘要: 类用法SAXParserFactory创建由系统属性javax.xml.parsers.SAXParserFactory确定的解析器的实例。SAXParserSAXParser接口定义了几个重载的parse()方法。SAXReaderSAXParser包装一个SAXReader…

CTF顶级工具与资源

《Web安全》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484238&idx1&snca66551c31e37b8d726f151265fc9211&chksmc0e47a12f793f3049fefde6e9ebe9ec4e2c7626b8594511bd314783719c216bd9929962a71e6&scene21#wechat_redirect 《网安面试指南》h…

腾讯云视频文件上传云存储时自动将mp4格式转码成m3u8

针对问题&#xff1a; 弱网环境下或手机网络播放mp4格式视频卡顿。 存储环境&#xff1a;腾讯云对象存储。 处理流程&#xff1a; 1&#xff1a;登录腾讯云控制台&#xff0c;进入对象存储服务&#xff0c;找到对应的存储桶&#xff0c;点击进入。 在任务与工作流选项卡中找…

【AIGC】逆向拆解OpenAI官方提示词Prompt技巧:高效提升ChatGPT输出质量

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;OpenAI官方提示词的介绍OpenAI官方提示词的结构与组成如何通过分析提示词找到其核心组件 &#x1f4af;OpenAI官方提示词分析案例一&#xff1a;制定教学计划案例二&…

Linux之nfs服务器和dns服务器

NFS服务器 NFS&#xff08;Network File System&#xff0c;网络文件系统)&#xff0c;NFS服务器可以让PC将网络中的NFS服务器共享的目录挂载到本地端的文件系统中&#xff0c;而在本地端的系统 中看来&#xff0c;那个远程主机的目录就好像是自己的一个磁盘分区一样。 注&am…

【机器学习】25. 聚类-DBSCAN(density base)

聚类-DBSCAN-density base 1. 介绍2. 实现案例计算 3. K-dist4. 变化密度5. 优缺点 1. 介绍 DBSCAN – Density-Based Spatial Clustering of Applications with Noise 与K-Means查找圆形簇相比&#xff0c;DBSCAN可以查找任意形状和复杂形状的簇&#xff0c;如S形、椭圆、半圆…

计组-层次化存储结构

这里主要看存储的整体结构&#xff0c;cache&#xff0c;内存 这里看存储结构是按什么样的层次来划分存储结构&#xff0c;速度由慢到快&#xff0c;容量由大到小&#xff0c;这是基于性价比的考虑&#xff0c;所以分为多级多层次&#xff0c;可以做到提高速度的同时没有增加多…

奇瑞不客气智驾 晚不晚?

文/孔文清 一直很好奇&#xff1a; 尹同跃董事长的金句“智驾不客气”&#xff0c;应该怎么翻译成英语&#xff1f; 谷俊丽的演讲PPT给了我答案&#xff1a; All in Ai Cars ——全力以赴、全情投入智能化汽车。 谷俊丽是奇瑞全球创新大会上最兴奋的人之一&#xff0c;有一种闭…

【万兴科技-注册_登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

vue3中跨层传递provide、inject

前置说明 在 Vue 3 中&#xff0c;provide 和 inject 是一对用于跨组件树传递数据的 API。它们允许你在祖先组件中使用 provide 提供数据或服务&#xff0c;然后在后代组件中使用 inject 来获取这些数据或服务。这种方式特别适用于跨多个层级的组件传递数据&#xff0c;而不需要…

JAVA——网络编程

目录 1.概述 常见的网络架构 2.网络编程三要素 a.ip b.端口 c.协议 3.UDP协议 a.InetAddress类 1.概述 2.实例化对象 b.DatagramSocket类&#xff08;快递公司&#xff09; c.DatagramPacket类&#xff08;包裹&#xff09; d.单播、组播、广播 4.TCP协议 …

完全透彻了解一个asp.net core MVC项目模板1

当我们使用Visual Studio 2022去新建一个基于asp.net core Web项目的时候&#xff0c;一般有三种选择&#xff0c;一种是空项目&#xff0c;一种是基于MVC的项目、再有一种就是基于包含Razor Pages实例的web应用。如下图&#xff1a; 今天&#xff0c;我们打算选择基于MVC模…

在米尔电子MPSOC实现12G SDI视频采集H.265压缩SGMII万兆以太网推流

1. 引言 随着网络视频平台的发展&#xff0c;用户对于4K高清画质的需求日益增长。然而&#xff0c;许多用户发现&#xff0c;即使购买了视频平台的会员&#xff0c;观看4K内容时画质却不如预期&#xff0c;有时甚至还会出现模糊、卡顿的情况。这种现象背后涉及到视频编码、网络…

Matlab数字信号处理——基于改进小波变换的图像去噪方法(7种去噪算法)

1.基于小波变换的阈值收缩法去噪 该方法利用小波变换分离出信号中的噪声成分&#xff0c;并通过设置合适的阈值对小波系数进行收缩&#xff0c;保留主要信息的同时&#xff0c;去除噪声。 %基于小波变换的阈值收缩法去噪算法 clear clc Iimread(nana.png); X im2double(I); …

HTB:Analytics[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many open TCP ports are listening on Analytics? 2.What subdomain is configured to provide a different application on the target web server? 3.What application is running on data.analytical.htb? 4.What version of…