JS를 통해 JSON 데이터를 얻고 로드하는 단계에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-14 11:40:063013검색
이번에는 JS를 통해 JSON 데이터를 가져오고 로드하는 단계에 대해 자세히 설명하겠습니다. JS를 통해 JSON 데이터를 가져오고 로드할 때 주의 사항은 무엇입니까?
JS를 통해 JSON 데이터를 얻고 로드하는 단계에 대한 자세한 설명
반복적인 콘텐츠 로직이 있는 페이지를 작성할 때 JSON 데이터를 사용하면 프로그래밍 효율성이 크게 향상되고 향후 데이터 유지 관리가 용이해질 수 있습니다. 따라서 동영상 주제 페이지에는 여러 개의 동영상 데이터 열을 표시해야 하는데, 저는 json을 사용하기로 했습니다.
HTML은 다음과 같습니다(주요 부분만 표시되며 JQ를 인용해야 함)
<p class="container-fluid content "> <p class="container neirong"> <p class="left fl"> <p class="title"> 热门视频 </p> <p class="medialist"> </p> </p></p> </p>
JS는 다음과 같습니다
<script>
$(document).ready(function(){
console.log(1111)
$.getJSON('data.json',function(data){
console.log(222)
var mediahtml="";
$.each(data,function(i,data) {
mediahtml+='<p class="media">'+
'<p class="media-left">'+
'<a data-toggle="modal" data-target="#myModal">'+
'<img class="media-object" src="'+data["imgsrc"]+
'" alt="">'+
'</a>'+'</p>'+
'<p class="media-body">'+
'<p class="title">'+
'<span class="classify">'+
data["classify"]+
'</span>'+
'<span class="titlename media-heading">'+
data['titlename']+
'</span>'+
'</p>'+
'<span class="time">'+
'<span class="glyphicon glyphicon-time"></span> '+
'<span>'+data['pubdate']+'</span>'+
'<p>'+data["intro"]+'</p>'+
'<p 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>'+
'</p>'+
'</p>'+
'<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">'+
'<p class="modal-dialog" role="document">'+
'<p class="modal-content">'+
'<p class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'+
'<span aria-hidden="true">×</span>'+
'</button>'+
'</p>'+
'<p class="modal-body"></p>'+
'</p>'+
'</p>'+
'</p>'
// 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 프로세스가 차단되어 페이지에서 데이터가 손실됩니다. 이 문제를 찾기 전에 오랫동안 찾고 있었는데 json 문제가 js에서 오류를 보고하지 않습니다. . 해결 방법은 encode 메서드를 사용하여 URL 형식을 지정한 다음 json에 추가하는 것입니다. 또한 html로 다시 변환하려면 decode를 사용해야 합니다.
두 번째 함정은 html을 특정 태그에 삽입하는 것입니다. 이를 달성하기 위해 after를 사용할 수 있습니다.
세 번째 요점은 문자열을 연결할 때 더하기 기호를 잊지 마세요. 문자열이 하나라도 누락되면 문제가 발생할 수 있습니다. 게다가 JS는 오류를 보고하지 않습니다. 접합 오류가 발생하면 찾기가 어렵습니다.
위는 JSON 데이터를 가져와서 로드하는 방법입니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
프로젝트에서 JS 및 ajax 상동성 전략을 사용하는 방법
위 내용은 JS를 통해 JSON 데이터를 얻고 로드하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!