ホーム > ブログ > javascript $.getJSONで一覧表示

Webデザイナー ブログ

javascript $.getJSONで一覧表示

2016年7月29日(javascript)

メモ。

クロスドメインの関係でphpかhtaccessで許可をとらないといけないので、
.jsonは.phpにし
下記を追加。

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
?>

jsは以下。

$(document).ready(function(){
  
  
  var voice = {};
  voice.btn = "<div id='btnMore'>もっと見る</div>";
  voice.node = $(".wrapsec");
  voice.node.after(voice.btn);
  
  voice.len = 0,
  voice.num = 10; //表示件数
  
  voice.list = function(data, num) {
    
    var i = (num == 0) ? 0 : num;
    
    for(i; i < num+voice.num; i++) {
      
      if(data[i] !== undefined) {
      
        var mark = (data[i].sex == "women") ? "-w" : "";
        mark = '<img src="http://gigaplus.makeshop.jp/kanimamire/img/icon/voiceIcon'+mark+'.gif" alt="" />';
        
        voice.node.append("<div class='sec'><h3>"+data[i].name+" "+data[i].date+"</h3><p class='M_clearfix'>"+mark+data[i].text+"</p><p class='pt'><a href='javascript:scroll(0,0)'>このページの先頭へ</a></p></div>");
        
      } else {
        console.log("nasi"); 
        $("#btnMore").hide(); 
      }
      $(".sec:eq("+i+")").hide();
    }
    
  };
  
  $.getJSON("http://kanimamire.info/voice/voice.php" , function(data) {
    
    voice.len = data.length;
    console.log(voice.len);
    
    voice.list(data, 0);//初期表示
    
    
    $("#btnMore").on("click", function() {
      var disnow = voice.node.find(".sec").length; //現在表示中の件数
      
      voice.list(data, disnow);
      $(".sec").fadeIn();
      
      
    });
    
  }).complete(function() {
    $(".sec").fadeIn();
  });
  

});

人気ブログランキングへ
応援お願いします!

コメントをどうぞ