2016-11-28 38 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>');