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

devtools/2024/11/7 15:07:50/
htmledit_views">

使用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.ppmy.cn/devtools/132035.html

相关文章

位运算相关算法

一、异或运算介绍 1、性质介绍 异或运算&#xff08;XOR&#xff0c;Exclusive OR&#xff09;是一种位运算符。对于两个位进行异或操作&#xff0c;当且仅当这两个位不同时&#xff0c;结果为 1&#xff1b;如果相同&#xff0c;则结果为 0。 A B A^B00001 1 101110 任何数…

代码随想录算法训练营Day.3| 移除链表元素 设计链表 反转链表

长沙出差ing&#xff0c;今天的核心是链表&#xff0c;一个比较基础且重要的数据结构。对C的指针的使用&#xff0c;对象的创建&#xff0c;都比较考察&#xff0c;且重要。 203.移除链表元素 dummyNode虚拟头节点很重要&#xff0c;另外就是一个前后节点记录的问题。但是Leet…

华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力3-获取设备位姿

设备位姿描述了物体在真实世界中的位置和朝向。AR Engine提供了世界坐标下6自由度&#xff08;6DoF&#xff09;的位姿计算&#xff0c;包括物体的位置&#xff08;沿x、y、z轴方向位移&#xff09;和朝向&#xff08;绕x、y、z轴旋转&#xff09;。通过AR Engine&#xff0c;您…

Java自动点名器实现案例详解

Java自动点名器实现案例详解 在教学管理中&#xff0c;点名是一项重要的任务。随着技术的发展&#xff0c;使用编程语言实现自动化的点名器不仅可以提高效率&#xff0c;还能增加课堂的互动性和趣味性。本文将详细介绍三个案例&#xff0c;分别是简单随机点名器、带有权重的随…

在使用Alt+Tab切换程序时 Windows 11 24H2会出现黑屏

Windows 中的 Alt-Tab 快捷键组合可帮助您在多个活动应用窗口之间循环跳转。 但是&#xff0c;在 Windows 11 24H2 更新中&#xff0c;该快捷键被弄坏了&#xff0c;如果按下组合键&#xff0c;就会触发黑屏。 虽然 Alt Tab 功能不会停止工作&#xff0c;但黑屏会持续 10 秒钟…

有Bootloader,为什么还要BROM?

有Bootloader&#xff0c;为什么还要BROM? 不少硬件平台都提供类似Boot ROM或者PBL(高通平台)固化的一段程序&#xff0c;出厂后用户一定不能修改。BROM可以引导Bootloader程序。大家知道&#xff0c;每个可启动的平台都会在存储设备&#xff0c;例如EMMC/NAND/UFS保存Bootloa…

工作管理实战指南:利用Jira、Confluence等Atlassian工具打破信息孤岛,增强团队协作【含免费指南】

如果工作场所存在超级反派&#xff0c;其中之一可能会被命名为“信息孤岛”&#xff0c;因为它们能够对公司的生产力和协作造成严重破坏。当公司决定使用太多互不关联的工具来完成工作时&#xff0c;“信息孤岛”就会出现&#xff0c;导致团队需要耗费大量时间才能就某件事情达…

LLMs之Calculate:利用大语言模型技术基于文本内容实现数字计算能力的简介、常用方法、代码实现之详细攻略

LLMs之Calculate:利用大语言模型技术基于文本内容实现数字计算能力的简介、常用方法、代码实现之详细攻略 导读:在基于大语言模型(LLM)技术实现数字计算能力的背景下,文本内容的理解和计算过程涉及多个领域的交叉技术,包括自然语言处理(NLP)、机器学习、以及数值计算。…