htmlでJSでJSONデータを取得してロードする方法
コンテンツロジックの重複性のページを書く時、jsonデータを使うとプログラム効率が著しく向上し、後期のデータのメンテナンスが容易になります。したがって、ビデオのテーマページでは、複数のビデオデータを表示する必要があります。
HTMLは以下の通りです(重要な部分だけを示します。JQを参照する必要があります。)
まずjsonファイルを新築したいですが、jsonファイルの注意すべき問題は、jsonはデータフォーマットに対して要求があり、urlの中の各種記号を認識していないので、エラーを提示します。修復しないと、JSプロセスをブロックして、データがページに表示されないことになります。解決策はencodeの方法を利用して、urlをフォーマットして、更にjsonに添加すればよくて、htmlの中でまだdecodeで回転してくるべきです。
二つ目のピットは挿入してあるラベルの中に入れます。四つの方法があります。afterを使えば実現できます。反対を使わないでください。
第三のポイントは、文字列をつなぎ合わせる時に、プラス記号を忘れないように注意してください。一つ足りないと問題が発生します。一つの小さな問題は長い間探してやっと発見します。
以上がJSONデータを取得してロードする方法です。
HTMLは以下の通りです(重要な部分だけを示します。JQを参照する必要があります。)
<div class="container-fluid content ">
<div class="container neirong">
<div class="left fl">
<div class="title">
</div>
<div class="medialist">
</div>
</div></div>
</div>
JSは以下の通りです
<script>
$(document).ready(function(){
console.log(1111)
$.getJSON('data.json',function(data){
console.log(222)
var mediahtml="";
$.each(data,function(i,data) {
mediahtml+='<div class="media">'+
'<div class="media-left">'+
'<a data-toggle="modal" data-target="#myModal">'+
'<img class="media-object" src="'+data["imgsrc"]+
'" alt="">'+
'</a>'+'</div>'+
'<div class="media-body">'+
'<div class="title">'+
'<span class="classify">'+
data["classify"]+
'</span>'+
'<span class="titlename media-heading">'+
data['titlename']+
'</span>'+
'</div>'+
'<span class="time">'+
'<span class="glyphicon glyphicon-time"></span> '+
'<span>'+data['pubdate']+'</span>'+
'<p>'+data["intro"]+'</p>'+
'<div class="guest">'+
'<span class="jia"> </span>'+
'<span class="name">'+data["name"]+'</span>'+
'<span class="position">'+data["position"]+'</span>'+
'<span class="glyphicon glyphicon-eye-open"></span>'+
'<span class="click-rite"></span>'+
'</div>'+
'</div>'+
'<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
'<div class="modal-dialog" role="document">'+
'<div class="modal-content">'+
'<div class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</div>'+
'<div class="modal-body"></div>'+
'</div>'+
'</div>'+
'</div>'
// var url_mobi=data.url_mobi;
// var url_pc=data.url_pc;
// if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
// $('.modal-body').prepend(url_mobi);
// }else{
// $('.modal-body').prepend(url_pc);
// }
//
//
})
$('.medialist').after(mediahtml);
})
})
$('#myModal').on('shown.bs.modal', function (e) {
// , modal block, $modala_dialog.height()
$(this).css('display', 'block');
var modalHeight = $(window).height() / 2 - $('#myModal .modal-dialog').height() / 2;
$(this).find('.modal-dialog').css({
'margin-top': modalHeight
});
});
//
// $('.modal').on('click', function () {
// if ($('#myModal').css("display") == "none") {
// $('.modal-body').children('iframe').attr('src', '');
// } else {
// $('.modal-body').children('iframe').attr('src',
// 'https://v.qq.com/iframe/player.html?vid=v0508nqkm75&tiny=0&auto=0');
// }
// })
</script>
注釈の部分は見なくてもいいです。内容に影響しません。まずjsonファイルを新築したいですが、jsonファイルの注意すべき問題は、jsonはデータフォーマットに対して要求があり、urlの中の各種記号を認識していないので、エラーを提示します。修復しないと、JSプロセスをブロックして、データがページに表示されないことになります。解決策はencodeの方法を利用して、urlをフォーマットして、更にjsonに添加すればよくて、htmlの中でまだdecodeで回転してくるべきです。
二つ目のピットは挿入してあるラベルの中に入れます。四つの方法があります。afterを使えば実現できます。反対を使わないでください。
第三のポイントは、文字列をつなぎ合わせる時に、プラス記号を忘れないように注意してください。一つ足りないと問題が発生します。一つの小さな問題は長い間探してやっと発見します。
以上がJSONデータを取得してロードする方法です。