我想在收到ajax响应后显示多个图像，但是当我迭代foreach循环时，它只显示第一个图像而不是所有图像。
<body onload="showMultiplePhotos()">
<div class="mx-auto d-block img-fluid">
<div class="img-zoom-container text-center">
<a href="#" class="previous">« Previous</a>
<span id="viewuploadedImage"><%= UserDetails.getInstance().getimageName() %></span>
<span id="search-result"></span>
<a href="#" class="next">Next »</a>
</div>
<div class="row mt-3">
<div class="col text-center">
<button class="btn clsBtn" onclick="window.open('', '_self', ''); window.close();">Close Window</button>
</div>
</div>
</div>
</body>
function bigImageRequest() {
var action = $('#view').attr('value');
var url = "bigImage"
$('.loader').show();
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: {
url: url,
action: action,
},
success: function(response) {
$('.loader').hide();
let elem;
let cntid = 0;
var totalNumberOfImage = response.length;
var successUrl = "./bigImage.jsp?id=" + response[0].userID;
window.open(successUrl, "_blank");
$('#viewuploadedImage').html(response.uploadedImage);
$('#container').append(response.uploadedImage);
$(response).each(function(i, element) {
$('#search-result').html(response.userPhoto);
})
},
error: function(jqxhr) {
$('.loader').hide();
alert("Something went wrong. Please logout and re-try again after login.");
return false;
}
});
}
作为响应，我收到以下响应，并且在页面上显示 userPhoto 响应:
[{
userPhoto: "<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userID: "7570b164-19e4-4561-b17e-f7f7e1c68f75"
}, {
userPhoto: "<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userPhotoID: "44"
}, {
userPhoto: "<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userPhotoID: "48"
}]
最佳答案
您需要使用jquery的append方法将参数指定的内容插入到匹配元素集中每个元素的末尾。工作示例:
//Your json response
var res=[
{
userPhoto:"<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userID:"7570b164-19e4-4561-b17e-f7f7e1c68f75"
},
{
userPhoto:"<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userPhotoID:"44"
},
{
userPhoto:"<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userPhotoID:"48"
}
];
//looping through result
res.forEach(function(obj) {
//appending images to div with id search-result
$('#search-result').append(obj.userPhoto);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="search-result"></div>更新:
您可以将所有图像附加到某个变量中，然后使用 .html 将其添加到特定的 div 中。工作示例:
//Your json response
var res=[
{
userPhoto:"<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userID:"7570b164-19e4-4561-b17e-f7f7e1c68f75"
},
{
userPhoto:"<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userPhotoID:"44"
},
{
userPhoto:"<img alt='img' src='data:image/jpg;base64,/9j/4AAQ…op' border='1' style='width:100%;height:auto;'/> ",
userPhotoID:"48"
}
];
var append_image="";
//looping through result
res.forEach(function(obj) {
//appending images
append_image+=obj.userPhoto;
});
//add to div
$('#search-result').html(append_image);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search-result"></div>关于javascript - 使用ajax响应显示多个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57857441/