AjaxとJqueryでJsonファイルをあらかじめロードする

私は、AJAXとJQueryでJSONファイルを使用して特定のコンテンツと投稿を読み込んでいる小さなプロジェクトに取り組んでいます。AjaxとJqueryでJsonファイルをあらかじめロードする

私は特定の文字列のパラメータで関数を作成し、HTML内の要素にonclickイベントを作成しました。次に、私の要素のonclickが私の関数に文字列を与え、それがAjax URLの終わりに文字列値を変更して、別の内容の新しいjsonファイルをロードします。しかし、クリック間の負荷は非常に長くなります。

私はすでにすべてのコンテンツを事前にロードしたいと思いますし、私が既に作成した読み込み画面を持っている可能性があります。ユーザーがカテゴリをクリックすると、ただちに変更されます...しかし、私はどのように笑いますか。

私は助けていただきありがとうございます。私はこれを理解することができない。私はhtmlのonlcickイベントについてコメントしました。

CODE -

function getposts(str) { 
 
    
 
    var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug='; 
 
    
 
    console.log(str); 
 
    
 
    $.ajax({ 
 
     type: 'GET' 
 
     , url: baseUrl + str 
 
     , data: { 
 
      get_param: 'value' 
 
     } 
 
     , dataType: 'json' 
 
     , success: function postData(data) { 
 
      //Image Post1 
 
      var imgTitle1 = data.posts[0].title; 
 
      imgTitle1 = imgTitle1.replace("Newsflash:", ""); 
 
      $('.ip1.text-heading').html(imgTitle1); 
 
      var imgThumb1 = data.posts[0].thumbnail_images.full.url; 
 
      $('.ip1.main-card-img1').css("background-image", "url(" + imgThumb1 + ")"); 
 
      //Text Post1 
 
      var title1 = data.posts[3].title; 
 
      title1 = title1.replace("Newsflash:", ""); 
 
      $('.p1.text-heading').html(title1); 
 
      var ex1 = data.posts[3].excerpt; 
 
      var maxLength = 100; 
 
      ex1 = ex1.substr(0, maxLength); 
 
      $('.p1.text-post-desc').html(ex1); 
 
      var thumb1 = data.posts[3].thumbnail_images.full.url; 
 
      $('.p1.card-img1').css("background-image", "url(" + thumb1 + ")"); 
 
      //Text Post2 
 
      var title2 = data.posts[1].title; 
 
      title2 = title2.replace("Newsflash:", ""); 
 
      $('.p2.text-heading').html(title2); 
 
      var ex2 = data.posts[1].excerpt; 
 
      ex2 = ex2.substr(0, maxLength); 
 
      $('.p2.text-post-desc').html(ex2); 
 
      var thumb2 = data.posts[1].thumbnail_images.full.url; 
 
      $('.p2.card-img2').css("background-image", "url(" + thumb2 + ")"); 
 
      //Text Post3 
 
      var title3 = data.posts[2].title; 
 
      title3 = title3.replace("Newsflash:", ""); 
 
      $('.p3.text-heading').html(title3); 
 
      var ex3 = data.posts[2].excerpt; 
 
      ex3 = ex3.substr(0, maxLength); 
 
      $('.p3.text-post-desc').html(ex3); 
 
      var thumb3 = data.posts[2].thumbnail_images.full.url; 
 
      $('.p3.card-img3').css("background-image", "url(" + thumb3 + ")"); 
 
     } 
 
    }); 
 

 
} 
 
getposts('news');

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
    <title>HSM App</title> 
 
    <meta name="MobileOptimized" content="width"> 
 
    <meta name="HandheldFriendly" content="true"> 
 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/styles.css" type="text/css"> 
 
    <link rel="icon" type="image/ico" href="http://www.hsm.co.za/images/interface/favicon.ico"> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet"> 
 
    <link rel="stylesheet" href="css/slick.css"> 
 
    <script src="js/jquery.min.js" type="text/javascript"></script> 
 
</head> 
 

 
<body id="search"> 
 
    <div class="load-cont"> 
 
     <div class="loading"> <img src="img/hsmLogo2.png" class="logo" alt=" "> 
 
      <h1>Highbury Media</h1> </div> 
 
    </div> 
 

 
    <div class="main-cont"> 
 
     <input type="checkbox" id="navigation" class="menu" /> 
 
     <label for="navigation"> &#9776; </label> 
 
     <nav class="menuItems"> 
 
      <ul class="menuList"> 
 
       <li class="home"> <span></span><a href="">Home</a> </li> 
 
       <li class="explore"> <span></span><a href="">Explore</a> </li> 
 
       <li> 
 
        <p>Your Highbury</p> 
 
       </li> 
 
       <li class="interests"> <span></span><a>Your Interests</a> </li> 
 
       <li class="book"> <span></span><a href="">Bookmarks</a> </li> 
 
       <li class="history"> <span></span><a href="">History</a> </li> 
 
       <li> 
 
        <p>Other</p> 
 
       </li> 
 
       <li class="feed"> <span></span><a href="">Feedback</a> </li> 
 
      </ul> 
 
     </nav> 
 
     <div class="tag-options"></div> 
 
     <section class="content"> 
 
      
 
      
 
      <div class="header-wrap"> 
 
       <div class="main-head"> 
 
        <div class="logo-wrap"> 
 
         <p>Higbury Media</p> <img class="nav-logo" src="img/hsmLogo.png"> </div> 
 
        
 
        <div class="search"> 
 
          <!--OVERLAY SEARCH--> 
 
          <input type="checkbox" id="op" name="search" value=" "> 
 
          <div class="lower"> 
 
           <label for="op">click the text</label> 
 
          </div> 
 
          <div class="overlay overlay-hugeinc col-12"> 
 
           <label for="op"></label> 
 

 
           <textarea class="search-text" placeholder="SEARCH"></textarea> 
 
          </div> 
 
        </div> 
 
        
 
       </div> 
 
/******ONLCIKS EVENTS*****/ 
 
       <div class="slider interest-slider"> 
 
        <div> 
 
         <p onclick="getposts('news')" id="news">News</p> 
 
        </div> 
 
        <div> 
 
         <p onclick="getposts('events')" id="events">Events</p> 
 
        </div> 
 
        <div> 
 
         <p id="health">Nightlife</p> 
 
        </div> 
 
        <div> 
 
         <p>Dine</p> 
 
        </div> 
 
        <div> 
 
         <p>Outdoors</p> 
 
        </div> 
 
        <div> 
 
         <p>Video</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="slider slider-for"> 
 
       <div class="post-cont" id="news-cont"> 
 
       <div class="ip1 full-post-img"> 
 
        <a class="link-click" id="post1"> 
 
         <div class="ip1 full-post-info"> 
 
          <a class="ip1 post-cat">Breaking News</a> 
 
          <h2 class="ip1 text-heading"></h2> 
 
          <p class="ip1 post-source">/</p> 
 
         </div> 
 
         
 
         <span class="ip1 main-card-img1"></span> 
 
        </a> 
 
       </div> 
 
       
 
       <div class="p1 full-post-text"> 
 
        <a class="p1 link-click" href="#" target="_blank"></a> 
 
         <div class="p1 text-post-img"> 
 
         <span class="p1 card-img1"></span> 
 
         <a class="p1 post-cat">Sport</a> 
 
         </div> 
 
         <div class="p1 full-text-info"> 
 
          <h2 class="p1 text-heading"></h2> 
 
          <p class="p1 text-post-desc"></p> 
 
          <p class="p1 post-source">/</p> 
 
         </div> 
 
       </div> 
 
       
 
       <div class="p2 full-post-text"> 
 
        <a class="p2 link-click" href="#" target="_blank"></a> 
 
         <div class="p2 text-post-img"> 
 
         <span class="p2 card-img2"></span> 
 
         <a class="p2 post-cat">Local News</a> 
 
         </div> 
 
         <div class="p2 full-text-info"> 
 
          <h2 class="p2 text-heading"></h2> 
 
          <p class="p2 text-post-desc"></p> 
 
          <p class="p2 post-source">/</p> 
 
         </div> 
 
       </div> 
 
       
 
       <div class="p3 full-post-text"> 
 
        <a class="p3 link-click" href="#" target="_blank"></a> 
 
         <div class="p3 text-post-img"> 
 
         <span class="p3 card-img3"></span> 
 
         <a class="p3 post-cat">Health</a> 
 
         </div> 
 
         <div class="p3 full-text-info"> 
 
          <h2 class="p3 text-heading"></h2> 
 
          <p class="p3 text-post-desc"></p> 
 
          <p class="p3 post-source">/</p> 
 
         </div> 
 
       </div> 
 
       
 
      </div> 
 
<!--END OF SLIDE 1--> 
 
      
 
<!--END OF SLIDE 3--> 
 
      </div> 
 
      
 
      <div class="post1 cont" id="cont"> 
 
       
 
       <div class="post-header"> 
 
        <img class="back" src="img/back.png"> 
 
        <ul> 
 
         <li><img class="like" src="img/like.png"></li> 
 
         <li><img class="dislike" src="img/dislike.png"></li> 
 
         <li><img class="share" src="img/share.png"></li> 
 
         <li><img class="bookmark" src="img/bookmark.png"></li> 
 
        </ul> 
 
       </div> 
 
       
 
       <div class="content-container"> 
 
        <div class="header-img"> 
 
         <span id="para-img"></span> 
 
        </div> 
 

 
        <div class="pageContent"> 
 
         <a class="post-cat">Nature</a> 
 
         <h1>Whales now getting bigger, somehow..</h1> 
 
         <p class="lay2 post-source">/</p> 
 
         <p> 
 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum in erat quis malesuada. Suspendisse vitae augue luctus, hendrerit turpis nec, convallis arcu. Donec condimentum ante ut mi volutpat semper. Suspendisse malesuada urna libero, vel aliquet diam egestas quis. Vivamus justo arcu, sollicitudin ut lacus non, placerat dignissim tortor. In dapibus leo eget purus aliquet mattis. Proin tempus, lacus vel blandit lacinia, mauris lectus imperdiet felis, molestie dignissim augue elit et lacus. 
 
         <br><br> 
 
         Morbi consequat, urna vitae ultricies aliquam, mauris turpis vestibulum lacus, in luctus ex libero non ligula. Mauris eget dui dolor. Suspendisse quis eros massa. Ut vel bibendum orci. Suspendisse ac risus nec sapien tristique interdum. Aenean tristique est vitae nulla rhoncus mattis. Suspendisse vel odio sagittis, suscipit quam non, cursus velit. Proin ac quam varius odio ullamcorper tristique accumsan at purus. Etiam vestibulum metus nibh, ut elementum libero porttitor id. Fusce ultricies massa non risus vehicula lobortis. Phasellus aliquet turpis placerat ex tincidunt eleifend. Aenean feugiat ante vitae purus accumsan, ac dictum lorem interdum. Aliquam euismod auctor venenatis. Donec et eleifend urna, non pretium arcu. Etiam nec ante pellentesque, finibus libero at, varius augue. 
 
         <br><br> 
 
         Suspendisse varius mauris quis ex blandit iaculis. Ut quis nisl non tellus pulvinar lobortis. Duis tincidunt maximus urna vel vestibulum. Aenean sit amet mauris ut diam auctor convallis. Sed in urna purus. In rutrum, mi eget varius ornare, augue ex euismod sapien, eget dapibus metus nunc non purus. Duis at convallis massa. Fusce vitae dictum eros, non malesuada turpis. Cras enim purus, lacinia et euismod quis, volutpat et dui. Phasellus egestas auctor luctus. Vivamus nec luctus quam. 
 
         </p> 
 
         
 
         <div class="post inter-tags"> 
 
          <ul> 
 
           <li> 
 
           <input type="checkbox" value=" " class="tag"> 
 
           <label for="tag" class="inter-label">Sa News</label> 
 
           </li> 
 
           <li> 
 
            <input type="checkbox" value=" " class="tag"> 
 
            <label for="tagPol" class="inter-label">Politics</label> 
 
           </li> 
 
           <li> 
 
            <input type="checkbox" value=" " class="tag"> 
 
            <label for="tagWN" class="inter-label">World News</label> 
 
           </li> 
 
          </ul> 
 
         </div> 
 
         
 
        </div> 
 
       </div> 
 
       
 
      </div> 
 
      
 
     </section> 
 
    </div> 
 
    <!--SCRIPTS--> 
 
    <script src="js/slick.min.js"></script> 
 
    <script src="js/main.js"></script> 
 
    <script src="js/fastclick.js"></script> 
 
</body> 
 

 
</html>

出典

2017-03-04 Anonymous

Howzit :)

Decareグローバル変数

var newsData; 
var eventsData; 

function getposts(str) { 


    // You may want some logic when to display 
    // your loading element here. like: 
    // if(str == 'news'){showLoadingElement()} 


    var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug='; 

    console.log(str); 

    $.ajax({ 
     type: 'GET' 
     , url: baseUrl + str 
     , data: { 
      get_param: 'value' 
     } 
     , dataType: 'json' 
     , success: function postData(data) { 
      if (str == 'news') { 
       newsData = data; 
      } 
      if (str == 'events') { 
       eventsData = data; 
      } 
     } 
    }); 


    // 
    // Hide loading element here. Use logic for the last data loaded: 
    // if(str == 'events'){hideLoadingElement()} 


} 
getposts('news'); 
getposts('events');

その後別々の内側にあなたのニュースやイベントデータを置くために、あなたのAJAXを発射する前に、あなたのdiの方法を外して広がっているポスト。グローバル変数にロードしたデータを切り替えるロジックが表示されます。

function displayPosts(str) { 
    var data; 
    if (str == 'news') { 
     data = newsData; 
    } 
    if (str == 'events') { 
     data = eventsData 
    } 

    //Image Post1 
    var imgTitle1 = data.posts[0].title; 
    imgTitle1 = imgTitle1.replace("Newsflash:", ""); 
    $('.ip1.text-heading').html(imgTitle1); 
    var imgThumb1 = data.posts[0].thumbnail_images.full.url; 
    $('.ip1.main-card-img1').css("background-image", "url(" + imgThumb1 + ")"); 
    //Text Post1 
    var title1 = data.posts[3].title; 
    title1 = title1.replace("Newsflash:", ""); 
    $('.p1.text-heading').html(title1); 
    var ex1 = data.posts[3].excerpt; 
    var maxLength = 100; 
    ex1 = ex1.substr(0, maxLength); 
    $('.p1.text-post-desc').html(ex1); 
    var thumb1 = data.posts[3].thumbnail_images.full.url; 
    $('.p1.card-img1').css("background-image", "url(" + thumb1 + ")"); 
    //Text Post2 
    var title2 = data.posts[1].title; 
    title2 = title2.replace("Newsflash:", ""); 
    $('.p2.text-heading').html(title2); 
    var ex2 = data.posts[1].excerpt; 
    ex2 = ex2.substr(0, maxLength); 
    $('.p2.text-post-desc').html(ex2); 
    var thumb2 = data.posts[1].thumbnail_images.full.url; 
    $('.p2.card-img2').css("background-image", "url(" + thumb2 + ")"); 
    //Text Post3 
    var title3 = data.posts[2].title; 
    title3 = title3.replace("Newsflash:", ""); 
    $('.p3.text-heading').html(title3); 
    var ex3 = data.posts[2].excerpt; 
    ex3 = ex3.substr(0, maxLength); 
    $('.p3.text-post-desc').html(ex3); 
    var thumb3 = data.posts[2].thumbnail_images.full.url; 
    $('.p3.card-img3').css("background-image", "url(" + thumb3 + ")"); 

}

トリガーあなたのhtmlであなたの新しい方法：

<div> 
    <p onclick="displayPosts('news')" id="news">News</p> 
</div> 
<div> 
    <p onclick="displayPosts('events')" id="events">Events</p> 
</div>

出典

2017-03-04 08:37:24 Harry

こんにちは！お返事ありがとうございます。私はあなたが "Howzit"という言葉を使用したことに気が付きました...万が一南アフリカ共和国？私は南アフリカでもありません。私は間違いなくあなたが提案したことを試し、今日あなたに戻ってきます。私は助けに感謝します：D –

ちょっとハリー、本当にありがとう！それは魅力のように働く。あなたは伝説です！：D –

AjaxとJqueryでJsonファイルをあらかじめロードする

答えて

関連する問題