我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

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

作者：我家小花儿 | 2024-03-18 11:21:25

踩

failed to load response data

文章目录

一、遇到问题
二、原因分析
- 2.1、form表单action请求打断了ajax请求
- 2.2、映像图解释
三、解决方法

一、遇到问题

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

请添加图片描述

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/cccQCresult/list" v-model="page.list">
    
<!-- vue语法忽略，中间业务逻辑省略，主要看form与绑定ajax按钮的包含关系	-->

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

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,
})
1
2
3
4
5
6
7

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

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>
1
2
3
4
5

因为表单内的<button>未指定类型时，默认的类型为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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

（3）form标签中添加οnsubmit=“return false;”

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/262667