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

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

  1. 在form标签上添加一个 target 属性,属性值指向 <ifream></ifream> 标签的name 属性。target 属性也就是当表单提交后,会自动跳转到 target 对应的地址上。这里表示提交表单后,跳转到ifream 层。
  1. 添加一个 <ifream></ifream> 标签,并添加行内样式使其为不可见状态(dispaly: none)
  1. 接收响应消息的 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 事件,有数据就会获取。

相关推荐
找不到工作的菜鸟1 分钟前
Three.js三大组件:场景(Scene)、相机(Camera)、渲染器(Renderer)
前端·javascript·html
定栓4 分钟前
vue3入门-v-model、ref和reactive讲解
前端·javascript·vue.js
专注API从业者8 分钟前
基于 Flink 的淘宝实时数据管道设计:商品详情流式处理与异构存储
大数据·前端·数据库·数据挖掘·flink
龙在天9 分钟前
H5开发,开发照相机,以及组件封装
前端
曼妥思16 分钟前
PosterKit:跨框架海报生成工具
前端·开源
binqian35 分钟前
【异步】js中异步的实现方式 async await /Promise / Generator
开发语言·前端·javascript
Jerry说前后端44 分钟前
Android 移动端 UI 设计:前端常用设计原则总结
android·前端·ui
熊猫钓鱼1 小时前
基于Trae CN与TrendsHub快速实现的热点百事通
前端·trae
LIUENG1 小时前
Vue3 响应式原理
前端·vue.js
讨厌吃蛋黄酥1 小时前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css