Question

我正在制作一个html页面，其中将来自3个不同站点的wordpress API的数据显示到html的3个不同部分中。我的脚本代码是这样的。

<script>
        $(document).ready(function(){
        $.getJSON("https://thebigscope.com/wp-json/wp/v2/posts?per_page=4",function(data) {
            $.each(data, function(key, val){
                $('#rss-english').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
            })          
        })
    })
</script>
<script>
        $(document).ready(function(){
        $.getJSON("https://sparktv.in/tamil/wp-json/wp/v2/posts?per_page=4&categories=74",function(data) {
            $.each(data, function(key, val){
                $('#rss-tamil').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
            })          
        })
    })
</script>
<script>
        $(document).ready(function(){
        $.getJSON("https://sparktv.in/hindi/wp-json/wp/v2/posts?per_page=4&categories=273",function(data) {
            $.each(data, function(key, val){
                $('#rss-hindi').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
            })          
        })  
    })
</script>

这是我的问题，如果我加载页面，有时会显示一个部分，有时会显示2，有时却没有显示。但是当我在chrome中打开开发者控制台时，突然所有数据都显示了。

Answer 1

您的方法没有什么问题，我只是重新排列并做了一些修改，希望在此之后您将不会遇到任何问题。

var getData=function(url){ return $.getJSON(url);}
function BindHTML(){
 getData("https://thebigscope.com/wp-json/wp/v2/posts?per_page=4").done(function(data){
      $.each(data, function(key, val){
            $("#rss-english").append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
        })  
 })
  getData("https://sparktv.in/tamil/wp-json/wp/v2/posts?per_page=4&categories=74").done(function(data){
       $.each(data, function(key, val){
            $('#rss-tamil').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
        }) 
 })
 getData("https://sparktv.in/hindi/wp-json/wp/v2/posts?per_page=4&categories=273").done(function(data){
     $.each(data, function(key, val){
            $('#rss-hindi').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
        }) 
 })

}
$(document).ready(function(){BindHTML();})

无法通过多个getJson请求更新页面

1 个答案: