在JSON對象的html頁面上的列表視圖中顯示圖像和描述

Question

我是javascript的新手，請幫助我在json頁面上的html頁面列表視圖中顯示圖像和說明。

在這里，我解析了一個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;
    }
});
}

請幫我如何在列表視圖中顯示這樣的圖像和說明 在此處輸入圖片說明

Answer 1

我認為這對您有用。

像這樣修改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);
});
}

在JSON對象的html頁面上的列表視圖中顯示圖像和描述

問題描述

1 個解決方案

解決方案1
2 已采納 2014-11-17 08:20:18

在JSON對象的html頁面上的列表視圖中顯示圖像和描述

問題描述

1 個解決方案

解決方案1 2 已采納 2014-11-17 08:20:18

解決方案1
2 已采納 2014-11-17 08:20:18