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

Question

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

我从控制台收到的错误：GEThttp://127.0.0.1:8080/myapi/myapi1/undefined404(未找到(

下面是显示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();
});

Answer 1

因此，您正在获取的数据是JSON编码格式的。因此您需要将其解析为JS对象。如下所示：success函数中的data = JSON.parse(data)。

Answer 2

(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, function (key, value) {
alert(data[key].videoName);
})