javascript $.getJSONで一覧表示

with コメントはまだありません

メモ。

クロスドメインの関係でphpかhtaccessで許可をとらないといけないので、
.jsonは.phpにし
下記を追加。
[php] <?php
header(‘Access-Control-Allow-Origin: *’);
header(‘Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept’);
?>
[/php]

jsは以下。
[javascript] $(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();
});
[/javascript]

});

Leave a Reply