我是 javascript 的新手，帮我在从 json 对象获取的 html 页面上的 ListView 中显示图像和描述..
我在这里解析了一个 json 对象并检索了图像 URL 和图像描述。现在我必须在 html 页面的 ListView 中显示图像和描述。但我不知道如何......请帮我解决这个问题..
这是我的 HTML 页面:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(searchAPI);
})
</script>
</head>
<body>
<input type="text" id="search1" value="search here" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy- images.jpg" style="width:200px;height:200px;">
<p id="p2"> </p>
</div>
</div>
</body>
</html>
我的js文件是:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
}
});
}
请帮助我如何在这样的 ListView 中显示此图像和描述
最佳答案
我认为这对你有用。
修改js如下:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:inline-block'/> <p style='display:inline-block'>"+desc+"</p></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
关于javascript - 在 JSON 对象的 html 页面上的 ListView 中显示图像和描述，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26964498/