Failed to load response data:No data found for resource with given identifier

2023-11-19

一、遇到问题

最近项目中表单提交需求遇到了这个问题。

在这里插入图片描述

Failed to load response data:No data found for resource with given identifier

翻译:加载响应数据失败:找不到具有给定标识的资源的数据。

二、原因分析

saveLabel对应后台操作就是给数据库中插入一条记录,后台操作一切都正常执行,说明从前端传的参数后台接收到了;那就是返回的问题了。没有返回值。

我们再把目光回到浏览器进行调试,发现,status竟然是canceled状态。

在这里插入图片描述
  为什么ajax会是canceled状态呢?经过一系列查阅资料,结论就是form表单action影响了ajax操作。
  其form表单action与ajax大致结构HTML如下。

<form id="searchForm" method="post" class="form-inline"  action="${request.contextPath}/config/wmscQCresult/list" v-model="page.list">
    
<!-- vue语法忽略,中间业务逻辑省略,主要看form与绑定ajax按钮的包含关系	-->

	<button id="save" value="save" @click="vm.saveLabel()"></button>
    <!--绑定ajax操作的按钮放在存在action的form表单中-->
</form>

2.1、form表单action请求打断了ajax请求

众所周知,表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。

如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:(该机制就是导致此问题的根本原因)
在这里插入图片描述

所以该问题的原因正是因为在form表单中使用了button(或submit)按钮又做了一次提交,form action事件与按钮绑定的click事件(ajax请求)同时触发,form action将表单内容以参数形式追加到了url末尾,而url的变化就会导致页面重新加载,而这恰恰就是导致ajax请求在执行后就被立即取消的原因。

2.2、映像图解释

//todo form action 导致 ajax 请求反不回来,页面刷新(家都被偷了)。

ajax正在请求时,form的action请求变更了当前的URL,刷新了页面,导致当前正在执行的ajax进求进行中止操作,造成了该问题(确实ajax请求后台收到了,但没返回值)。中止后该请求的状态码将为canceled。

三、解决方法

3.1、方式一:ajax改为同步

即async: false

$.ajax(
{
    url:baseURL+"config/list",
    type:"post",
    dataType : "json",
    async: false,
})

歪方法,会导致页面操作效率变慢。

ajax中async属性的默认值为true,即异步状态,ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的success方法,这时候执行的是两个线程。

将async设置为false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

这样做有点违背ajax的原本意味了。我们知道本来ajax就是A(Asynchronous,异步),为了更快,局部刷新。现在改为同步,就相当于上一把锁,整个效率就变慢了。

//todo 画syn映像图,请求同步在一起了。

3.2、方式二:分离ajax和form action

既然是因为互相影响,那将它们分离即可。

将有ajax操作的按钮放到form表单之外。或者仅使用form action提交请求。

3.3、方式三:阻止表单默认提交机制

如果既要求效率,并且form action与ajax分离不开,那么就只能采用阻止表单默认提交机制。

(1)修改按钮type为button

<form ....> 
	<button type="button"></button> 
</form>

因为表单内的未指定类型时,默认的类型为submit,可以显式的修改为button类型来阻止表单提交。

(2)利用preventDefault()方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(event){
            event.preventDefault();
        }
    </script>
</head>
<body>
    <form action="">
        <button type="submit" value="button" οnclick="func(event)" /> 
    </form>
</body>
</html>

也就是为按钮的绑定的click函数前加上event.preventDefault();

(3)form标签中添加οnsubmit=“return false;”

    <form action="" onsubmit="return false;">
        <button type="submit" value="button" /> 
    </form>

onsubmit事件的作用对象为,所以把onsubmit事件加在提交按钮身上是没有效果的。
  form对象的onsubmit事件类似onclick,都是先处理调用的函数,再进行表单是否跳转布尔值的判断
  
οnsubmit=“return true” 为默认的表单提交事件
οnsubmit=“return false” 为阻止表单提交事件

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Failed to load response data:No data found for resource with given identifier 的相关文章

  • 龙芯+RT-Thread+LVGL实战笔记(28)——电子琴准备工作

    写在前面 临近期末 笔者工作繁忙 因此本系列教程的更新频率有所放缓 还望订阅本专栏的朋友理解 请勿催更 笔者在此也简要声明几点 有些硬件模块笔者并没有 如LED点阵 压力传感模块 RFID模块等 因此这些模块的相关任务暂时无法给出经过验证的
  • 环信IM Demo登录方式如何修改为自己项目的?

    在环信即时通讯云IM 官网下载Demo 本地运行只有 手机 验证码 的方式登录 怎么更改为自己项目的Appkey和用户去进行登录呢 本文以Web端为例 教大家如何更改代码来实现 1 VUE2 Demo vue2 demo源码下载 vue2
  • 我当年自学黑客(网络安全)的一些心得!(内附学习笔记)

    前 言 写这篇教程的初衷是很多朋友都想了解如何入门 转行网络安全 实现自己的 黑客梦 文章的宗旨是 1 指出一些自学的误区 2 提供客观可行的学习表 3 推荐我认为适合小白学习的资源 大佬绕道哈 文末有福利 一 自学网络安全学习的误区和陷阱
  • vue的组件

    在Vue中 组件是可复用的代码块 用于构建用户界面 Vue的组件系统允许您将界面拆分为独立的 可重复使用的部件 提供了更好的代码组织和复用性 以下是在Vue中创建组件的基本步骤 创建一个组件实例 可以使用Vue extend 方法创建一个V
  • 从外卖员到程序员,自学3年终于转行成功,三面“拿下”拼多多

    前言 先来自我介绍 老家农村 家里好不容易把我送到大城市读书 大学非985 211 但在我们老家 能出一个本科大学生也是非常不容易的 因为农村信息的相对闭塞 我对大学专业一无所知 加上分数并非前茅 最后被调剂一个我并不喜欢的专业 这里就不透
  • 内网穿透的应用-使用Net2FTP轻松部署本地Web网站并公网访问管理内网资源

    文章目录 1 前言 2 Net2FTP网站搭建 2 1 Net2FTP下载和安装 2 2 Net2FTP网页测试 3 cpolar内网穿透 3 1 Cpolar云端设置 3 2 Cpolar本地设置
  • 2020年认证杯SPSSPRO杯数学建模D题(第二阶段)让电脑桌面飞起来全过程文档及程序

    2020年认证杯SPSSPRO杯数学建模 D题 让电脑桌面飞起来 原题再现 对于一些必须每天使用电脑工作的白领来说 电脑桌面有着非常特殊的意义 通常一些频繁使用或者比较重要的图标会一直保留在桌面上 但是随着时间的推移 桌面上的图标会越来越多
  • 【面试】 前端竞争压力大?揭秘让你们学后端的真实动机!

    前端开发属于程序员吗 网友是这样回答的 看完前端同学的评论 我悟了 你们让人都去学后端卷 然后减小前端竞争压力是吧 哈哈哈 你们这帮老6 于是我去拿出了我收藏的 某前端招聘JD来盘一盘 那些觉得 是个人都能干前端 的同学们想必已经熟练掌握了
  • 拼多多详情API开启运营比价新纪元

    随着互联网的快速发展 电商行业正在迅速崛起 拼多多作为一家新兴的电商平台 凭借其独特的营销策略和创新的商业模式 成为了电商行业的一匹黑马 在拼多多的成功背后 其详情API接口营销起到了至关重要的作用 本文将详细介绍拼多多详情API接口营销的
  • 如何给 unplugin-vue-components/vite 写一个简单的 resolver

    大部分工作 unplugin vue components 都已经处理好了 我们只需要接收组件名来判断是否是自己的组件 然后处理对应的导入逻辑 一共 3 个字段 as 重命名类似 import componentNameReName fro
  • 【连续和自适应资源需求估计】通过不断应用在线优化、选择和估计,SARDE能够有效地适应在线跟踪,并使用得到的集成技术减少模型误差(Python代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Python代码 数据 文章
  • 每天10个前端小知识 <Day 5>

    前端面试基础知识题 1 typeof 与 instanceof 有什么区别 typeof与instanceof都是判断数据类型的方法 区别如下 typeof会返回一个变量的基本类型 instanceof返回的是一个布尔值 instanceo
  • 网络安全(黑客)自学

    1 网络安全是什么 网络安全可以基于攻击和防御视角来分类 我们经常听到的 红队 渗透测试 等就是研究攻击技术 而 蓝队 安全运营 安全运维 则研究防御技术 2 网络安全市场 一 是市场需求量高 二 则是发展相对成熟入门比较容易 3 所需要的
  • 低代码-添加按钮组件设计

    效果图 可拆分为以下细节 按钮列表 删除 两个操作需同步删除 点击外侧删除 点击复选框删除 添加 点击复选框添加 示例代码 技术栈 vue3 arco design ts less tailwindcss
  • 低代码配置-属性配置面板设计

    模块设计 tab项切换 组件基础属性 组件数据属性 组件事件属性 表单属性 模块输出函数设计 tab切换函数 列表表单属性 数据来源 调用接口时一次赋予 无需使用selectItem 如需使用 归入基础属性 列表标题 是否展示筛选区域
  • 网页订货系统的诸多优势|企业APP订单管理软件

    1 订单信息 发货信息 账目信息一目了然 生产企业 总代理 和分销商之间可以清楚直观的了解到商品和货款的实时状态 以便高效的订货 发货 进行货款催收以及商品的物流跟踪 2 建立稳固的客户关系 避免客户被竞争对手挖墙脚 有了网上订货系统 企业
  • Web自动化测试 —— cookie复用

    一 cookie简介 cookie是一些数据 存储于用户电脑的文本文件中 当web服务器想浏览器发送web页面时 在链接关闭后 服务端不会记录用户信息 二 为什么要使用Cookie自动化登录 复用浏览器仍然在每次用例开始都需要人为介入 若用
  • 网络安全(黑客)自学启蒙

    一 什么是网络安全 网络安全是一种综合性的概念 涵盖了保护计算机系统 网络基础设施和数据免受未经授权的访问 攻击 损害或盗窃的一系列措施和技术 经常听到的 红队 渗透测试 等就是研究攻击技术 而 蓝队 安全运营 安全运维 则研究防御技术 作
  • 每天10个前端小知识 <Day 14>

    前端面试基础知识题 1 CSSOM树和DOM树是同时解析的吗 浏览器会下载HTML解析页面生成DOM树 遇到CSS标签就开始解析CSS 这个过程不会阻塞 但是如果遇到了JS脚本 此时假如CSSOM还没有构建完 需要等待CSSOM构建完 再去
  • 每日变更的最佳实践

    在优维公司内部 我们采用发布单的方式进行每天的应用变更管理 这里给各位介绍优维的最佳实践 变更是需要多角色合作的 而且他是整体研发流程的一部分 在优维内部 我们坚持每日变更 打通开发环节到最终发布上线的全过程 在保证质量的前提下 尽可能提升

随机推荐

  • Mysql多表联查,查询结果出现重复的原因和解决方法

    1 背景 根据业务需要 需要使用如下的命令进行多表联查 select a id as a id b id as b id b protocol as protocol b priority as priority from a b left
  • Ubuntu提示Temporary failure in name resolution

    解决方法1 重启网络服务 service network manager restart 解决方法2 定义域名解析服务器ip sudo vi etc resolv conf 在里面添加下面两行 nameserver 1 1 1 1 name
  • ubuntu禁止自动更新内核

    总结了三处需要改的地方 1 查看自己电脑的内核 dpkg get selections grep linux 得到如下信息 查看正在使用的内核 uname a 得到如下信息 禁止更新内核 sudo apt mark hold linux i
  • 【深度学习】模型评价指标

    一 分类任务 分类任务一般有二分类 多分类和多标签分类 多分类 表示分类任务中有多个类别 但是对于每个样本有且仅有一个标签 例如一张动物图片 它只可能是猫 狗 虎等中的一种标签 二分类特指分类任务中只有两个类别 多标签 一个样本可以有多个标
  • [思考进阶]02 如何进行认知升级?

    除了要提升自己的技术能力 思维的学习和成长也非常非常重要 特推出此 思考进阶 系列 进行刻意练习 从而提升自己的认知 最近在看东野的 无名之町 这本书写于2021年 日本正值疫情 书中也有大幅疫情相关的文字描述 疫情正影响着一切 后悔的一件
  • Spring ioc容器创建过程(1)BeanFactory初始化

    文章目录 一 ApplicationContext 二 常见的ApplicationContext 三 ioc容器的初始化 1 AbstractApplicationContext prepareRefresh 2 AbstractAppl
  • C# GC原理

    在 NET框架包含一个托管堆 所有的 NET语言在分配引用类型对象都要使用它 像值类型这样的轻量级别对象始终分配在栈中 但是所有的类实例和数组都被生成在一个内存池中 这个内存池就是托管堆 垃圾收集器的托管的基本算法很简单 1 将所有的托管内
  • 老毛桃 安装linux双系统,安装CentOS 7双系统(二)——安装过程step by step

    上一篇中我们确定了分区方案之后 就可以开始安装双系统啦 前期准备 重点 装系统之前一定要准备一个U盘启动盘 出问题时候可以马上进PE恢复 血的教训 我建议对磁盘进行分区 重建MBR等操作都在PE里面完成 制作U盘启动工具可以使用大白菜 大白
  • 【DBeaver】介绍DBeaver这一款强大的数据库连接工具

    近期在工作中需要使用到国产的达梦数据库 我们使用DBeaver作为数据库连接工具 DBeaver是一款很强大的数据库连接工具 其适用于所有的数据库 支持所有流行的关系数据库 MySQL PostgreSQL SQLite Oracle DB
  • UI设计师有钱途还是平面设计师或者是网页设计师呢?

    UI设计 平面设计和网页设计 哪个前景更好呢 其实ui和网页设计都属于平面设计里的一个分支 举个例子 设计一份饭店的点菜单 一样的图案 印刷出来是传统平面设计 放网站上是网页设计 放手机上显示是UI 其实都是一样的平面美术设计 那么有人要问
  • Vscode

    文章目录 点击左下角的用户或者设置的 Sign in to Sync Setting 使用GitHub或者Microsoft账户登录 就能开启同步功能
  • 【目标检测】34、FSAF: Feature Selective Anchor-Free Module for Single-Shot Object Detection

    文章目录 一 背景 二 方法 2 1 Ground truth and loss 2 2 Online Feature Selection 2 3 将 RetinaNet 和 FSAF 联合后如何训练和测试 三 效果 论文 Feature
  • 中文姓名、电话、邮箱的正则表达式

    1 中文姓名 如 张三 噶及 洛克业 a zA Z0 9 u4e00 u9fa5 1 10 2 电话验证 如 010 85369999 186199999 0 d 2 3 d 7 8 d 3 5 13 14 15 18 17 d 9 3 电
  • QT连接Mysql后的简单操作(增删改查)

    连接数据库 首先要连接自己在电脑上安装的MySql的数据库 这个是最难也是最重要的一步 万事起步难 连接上了之后的Sql语句就会就会非常简单了 连接数据库可以参考这篇博客 注意在连接时会有可能会有很多报错信息 但是只要按照这个操作来 一步一
  • nc命令使用

    一 nc介绍 netcat 简称 nc 安全界叫它瑞士军刀 官网地址 Ncat Netcat for the 21st Century nc 的基本功能如下 telnet 获取系统 banner 信息 传输文本信息 传输文件和目录 加密传输
  • 通俗易懂web3.0

    目录 前言 一 WEB1 0 二 WEB2 0 三 WEB3 0 区别 最后 前言 大家好 我是清风 互联网连接了人与人 在过去的30年中 互联网技术不断进化 演化 向纵深发展 政治 经济 社交 生活 工作已经几乎离不开互联网 我们经历了W
  • 云计算导论(第二版)李伯虎著全部课后题的答案

    目录 第一章 绪论 1 联系自己身边的生产生活实践 试列举2 3个你认为正在运用或者可以运用云计算的例子 2 你认为云计算对个人与社会带来了什么样的影响 3 分析云计算服务和云计算平台的区别和联系 4 云计算与 创新 协调 绿色 开放 共享
  • LangChain 是一个强大的框架,可以简化构建高级语言模型应用程序的过程。

    LangChain 是一个强大的框架 可以简化构建高级语言模型应用程序的过程 What is LangChain LangChain是一个强大的框架 旨在帮助开发人员使用语言模型构建端到端的应用程序 它提供了一套工具 组件和接口 可简化创建
  • 禁用触摸板

    sudo rmmod psmouse 这个是禁用的 sudo modprobe psmouse 这个是启用的
  • Failed to load response data:No data found for resource with given identifier

    一 遇到问题 最近项目中表单提交需求遇到了这个问题 Failed to load response data No data found for resource with given identifier 翻译 加载响应数据失败 找不到具