Question

刚开始使用这个伪api服务练习ajax。 JSONPlaceholder

但我对将数据显示到html文件感到困惑。我只是想显示这样的数据。

博客标题：aut aut facere repelat provident occaecati excepturi optio reprehenderit（随jason文件提供）

博客文章：＆＃34; quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto＆＃34; （附jason文件）

它提供了root

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

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

如何将数据显示为html？

Answer 1

假设你有这样的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);

Answer 2

您可以使用JavaScript中的数据对象操作（DOM）在HTML中显示JSON数据。

你可以在jQuery中这样做：

<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>

Answer 3

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

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

将json数据显示为HTML文件

3 个答案: