时间戳

首页 > 解决方案 > 无法从多个 getJson 请求更新页面

jquery - 无法从多个 getJson 请求更新页面

问题描述

我正在制作一个 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 中打开开发者控制台时，突然所有数据都显示出来了。

标签： jqueryhtmlwp-api

解决方案

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

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();})

推荐阅读