我正在使用 Restful API、MVC 和 ajax。我试图从后端获取数据,然后在一些 div 内显示图像。结果应该如下:
这是我的后端代码:
/*route:api/images*/
[HttpGet]
public IEnumerable<DTO> GetData(string Id) {
/*Do something*/
return Dto;/*the dto has an imgurl property*/
}
在我的前端
<div id="mydiv></div>
<script>
$(document).ready(function () {
$.ajax({
url: "http://localhost:59245/api/api/images",
type: "Get",
success: function (data) {
for (var i = 0; i < data.length - 1; i++) {
$('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+
'<h3 class="centrar">' + data[i].Titulo + '</h3><a href="'+
data[i].ImagenUrl+'</a><p>'+data[i].Paragraph+'</p></div>'
).appendTo("#mydiv");
}
},
error: function (msg) { alert(msg); }
});
});
</script>
我的问题是,当我尝试显示 #mydiv 内的图像时,结果如下:
我们可以看到 anchor 标记包裹了该段落,但在我的 ajax 代码中我并不是故意这样做的。 我如何解决它? 谢谢
最佳答案
您没有 img 标签。尝试这个
<script>
$(document).ready(function () {
$.ajax({
url: "http://localhost:59245/api/api/images",
type: "Get",
success: function (data) {
for (var i = 0; i < data.length - 1; i++) {
$('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+
'<h3 class="centrar">' + data[i].Titulo + '</h3><a href="'+
data[i].ImagenUrl+'"><img src="'+data[i].ImagenUrl+'"/></a><p>'+data[i].Paragraph+'</p></div>'
).appendTo("#mydiv");
}
},
error: function (msg) { alert(msg); }
});
});
关于javascript - AJAX mvc web api : create div with images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46208278/