顯示來自json的帖子

Question

我必須顯示json的帖子，但是當我嘗試用於循環時，什么也沒發生。這是我的代碼，我做錯了。 TY

JS

   var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
 url: root,
 method: 'GET',
 success: function(response) {
 console.log(response);

 jQuery.get('/posts', function(posts) {
    for (var i = 0; i < posts.length; i++) {
    document.write(posts[i]);
    }
   });
 }
});

有想法嗎？

Answer 1

在ajax方法中調用API是錯誤的。

var root = 'https://jsonplaceholder.typicode.com';
    $.ajax({
     url: root+"/posts",
     method: 'GET',
     contentType: 'application/json',
     success : function(data) {
        //The 'data' u recieve here is the response from the api, Use this data to loop through and display it in the web page
      },
     error: function(err) {
      console.log("err");
       }  
     }
    });

試試上面的代碼片段，希望它能起作用

Answer 2

 var root = 'https://jsonplaceholder.typicode.com'; $.ajax({ url: root+"/posts", method: 'GET', contentType: 'application/json', success: function(posts) { console.log("Data=>",posts); $.each(posts,function(index,post){ document.write("<p>"+post.title+"</p>"); }); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 

您應該提供正確的URL root+'/posts' ，以便從API提取數據。

Answer 3

您可以使用jQuery.get使其更簡單

$.get('https://jsonplaceholder.typicode.com/posts',function(data){
    $.each(data,function(key,post){
        $('body').append('<p>'+post.title+'</p>');
    });
});

檢查文檔（ https://api.jquery.com/jquery.get/ ）