为啥在获取视频数据时收到错误 404？

Posted 2023-03-31

【中文标题】为啥在获取视频数据时收到错误 404？

【英文标题】：Why am i receiving error 404 when fetching video data?为什么在获取视频数据时收到错误 404？

【发布时间】：2021-07-04 04:00:00

【问题描述】：

我正在尝试显示代码文件夹的 mp4 格式的视频。当我尝试通过单击按钮来获取视频时，它会显示一个空白区域但不显示视频。display of the output

我从控制台收到的错误：GET http://127.0.0.1:8080/myapi/myapi1/undefined 404 (Not Found)

下面是显示json数据的url： http://localhost:8080/myapi/myapi1/user/1

上面的链接显示：

"videoName":"video.mp4"

使用 ajax 获取视频并显示的代码：

$('#room1').on('click',function (e)
                    $.ajax(
                    
                    method: "GET",
                    cache: false,
                    dataType: "json",
                    url: "http://localhost:8080/myapi/myapi1/user/1",
                    success: function(data) 
                        var student = '';

                    // ITERATING THROUGH OBJECTS
                    $.each(data, function (key, value) 
                        
                        // DATA FROM JSON OBJECT
                        student += '<video ';
                           
                        student += 'src="' + 
                            value.videoName + '" autoplay loop muted></video>';
                    );
                    
                   
                    $('#video').append(student);
                    ,
                    error:function(exception)alert('Exeption:'+exception);
                    )
                    e.preventDefault();
                );

【问题讨论】：

您可以尝试硬刷新页面以清除缓存吗？ Ctrl（或 Cmd）+ R

能否在控制台打印数据变量并添加响应？

@brice 试过了，但仍然收到同样的错误

@AdisonMasih 我收到的回复：未定义

【参考方案1】：

因此，您获取的数据采用 JSON 编码格式。所以你需要将它解析为一个 JS 对象。像这样：data = JSON.parse(data) 在你的 success 函数中。

【讨论】：

我已按照建议添加：success: function(data = JSON.parse(data)) 但我仍然收到相同的错误。

不是这样的。在success函数体内添加data = JSON.parse(data)。

【参考方案2】：

(1)由于您只返回了一个数据项，请将成功块从：

success: function(data) 
var student = '';

// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) 
                        
// DATA FROM JSON OBJECT
student += '<video ';
                           
student += 'src="' + 
value.videoName + '" autoplay loop muted></video>';
);
                    
$('#video').append(student);
,

到

success: function(data) 
var student = '';

                        
// DATA FROM JSON OBJECT
student += '<video ';
                           
student += 'src="' + 
data.videoName + '" autoplay loop muted></video>';
                    
$('#video').append(student);
,

data.videoName已经是您需要的数据（视频文件名）

(2) 但是，如果您有多个数据，如下所示：

["videoName":"video.mp4", "videoName":"video1.mp4"]

那么您可以使用以下内容：

success: function(data) 
var student = '';

 for (var x = 0; x < data.length; x++)    
                        
// DATA FROM JSON OBJECT
student += '<video ';
                           
student += 'src="' + 
data[x].videoName + '" autoplay loop muted></video>';


                    
$('#video').append(student);
,

data[index].videoName 将是每个索引的数据（视频文件名）

(3) 如果你仍然喜欢使用键/值对，正确的语法应该是这样的：

 $.each(data, function (key, value) 
  alert(data[key].videoName);
)

【讨论】：

很好的解释，谢谢。我可以知道为什么我提供的代码会产生错误吗？它适用于非 RESTful 后端。