html 에서 JSON 데 이 터 를 JSON 으로 가 져 오고 불 러 오 는 방법
HTML 은 다음 과 같 습 니 다.
<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>
주석 부분 은 보지 않 아 도 되 고 내용 에 영향 을 주지 않 습 니 다.먼저 제 이 슨 파일 을 새로 만 들 려 면 제 이 슨 파일 이 주의해 야 할 문 제 는 제 이 슨 이 데이터 형식 에 대한 요구 가 있 고 url 의 각종 기 호 를 식별 하지 못 하기 때문에 오 류 를 제시 할 수 있 습 니 다.만약 에 복원 하지 않 으 면 JS 프로 세 스 를 차단 하여 데이터 가 페이지 에 표시 되 지 않 습 니 다.이 문 제 를 오래 찾 아 보 았 습 니 다.그리고 제 이 슨 문 제 는 js 에서 잘못 보고 되 지 않 습 니 다.해결 방법 은 encode 방법 을 이용 하여 url 을 포맷 한 다음 에 json 을 추가 하면 됩 니 다.html 에 서 는 decode 로 돌려 야 합 니 다.
두 번 째 구 덩이 는 html 를 특정한 태그 에 삽입 하 는 것 입 니 다.네 가지 방법 이 있 습 니 다.after 를 사용 하면 실현 할 수 있 습 니 다.반대로 사용 하지 마 세 요.
세 번 째 는 문자열 을 맞 출 때 플러스 번 호 를 잊 지 않도록 주의해 야 한다.하나 가 적 으 면 문제 가 생 길 수 있다.작은 문 제 는 오랫동안 찾 아 봐 야 발견 할 수 있 고 맞 춤 형 오 류 는 JS 가 잘못 보고 하지 않 아 발견 하기 어렵다.
JSON 데 이 터 를 가 져 와 불 러 오 는 방법 입 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.