2016-11-28 79 views
0

剛開始使用這個API服務執業假阿賈克斯。但JSONPlaceholder顯示數據,JSON,HTML文件

1米混淆顯示數據的HTML文件。 1只是想表明這樣的數據。

博客標題:UNT或拒絕矇蔽提供歡迎找到選項(自帶賈森文件)

博客文章「,是因爲他們收到接受後續承擔管理和查找不適可能是我們所有的東西是其結果將是極其「(自帶賈森文件)

它提供了根

var root = 'https://jsonplaceholder.typicode.com'; 

$.ajax({ 
    url: root + '/posts/1', 
    method: 'GET' 
}).then(function(data) { 
    console.log(data); 
}); 

1:如何可以顯示數據的HTML?

+1

而不是註銷的控制檯上的數據...創建一個HTML元素,並對其內容的這些數據,並追加到身體 – Geeky

回答

3

假如你有這樣JSON:

{ 
    title: 'My awesome title', 
    description: 'My awesome description' 
} 

而這樣的HTML代碼:

<h1 id="title"></h1> 
<div id="description"></div> 

你應該給

$('#title').text(data.title); 
$('#description').text(data.decription); 

代替

console.log(data); 
+0

它的工作完美。 1可以顯示的圖像如何? – Janath

+0

@CssSY'$( '#圖像')。的Attr( 'src' 中,data.imageUrl)',其中''img' image'是你的標籤 –

+0

大的。是否有可能使用該API來使用CRUD操作? – Janath

1

可以顯示使用數據對象操作(DOM)在JavaScript的HTML中的RAW數據。

你可以像下面這樣做在Photoshop:

<p>Hello World</p> 


<script> 
    var root = "https://jsonplaceholder.typicode.com"; 
    $.ajax({ 
     url: root + '/posts/1', 
     method: 'GET' 
    }).then(function(data) { 
     $("p").html(data.title); 
    }); 
</script> 
+0

1:如何可以顯示圖像? – Janath

+0

您可以通過使用'$( 「IMG 」)更新img標籤的src屬性的Attr(「 SRC」,data.imageSource);'。這只是一個例子,雖然,根據您的需要改變它。但是,應該做的工作 – prtdomingo

1
Display json data into html with below from the json response, 

    $("div").html('<div>'+data.title+'</div><div>'+data.description+'</div>');