为什么我在获取视频数据时会收到错误 404？

问题描述

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

我从控制台收到的错误：GET http://127.0.0.1:8080/myapi/myapi1/undefined 404（未找到）

下面是显示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 height="603"';
                           
                        student += 'src="' + 
                            value.videoName + '" autoplay loop muted></video>';
                    });
                    
                   
                    $('#video').append(student);
                    },error:function(exception){alert('Exeption:'+exception);}
                    })
                    e.preventDefault();
                });

解决方法

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

,

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

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

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

到

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

                        
// DATA FROM JSON OBJECT
student += '<video height="603"';
                           
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 height="603"';
                           
student += 'src="' + 
data[x].videoName + '" autoplay loop muted></video>';

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

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

(3) 如果您仍然喜欢使用键/值对，正确的语法如下：

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