페이지를 볼 수 있으므로 클라이언트에서 액세스 할 수 있도록 만들고 싶은 서버에서 생성 한이 JSON 파일이 있습니다. 기본적으로 달성하고 싶은 것은 다음과 같습니다.
내 html 문서에 다음 태그가 선언되어 있습니다.
<script id="test" type="application/json" src="http://myresources/stuf.json">
소스에서 참조 된 파일에는 JSON 데이터가 있습니다. 내가 본 것처럼 데이터는 스크립트에서 발생하는 것처럼 다운로드되었습니다.
이제 Javascript에서 어떻게 액세스합니까? JSON 데이터를 얻기 위해 다양한 방법을 사용하여 jQuery를 사용하거나 사용하지 않고 스크립트 태그에 액세스하려고 시도했지만 어떻게 든 작동하지 않습니다. 그는하기 innerHTMLJSON 데이터는 스크립트에서 인라인 작성했던 일 것입니다. 내가 달성하려는 것이 아니었고 그렇지 않습니다.
페이지로드 후 원격 JSON 요청도 옵션이 아닙니다.
답변
그런 식으로 JSON을로드 할 수 없습니다. 죄송합니다.
“내가 src여기서 그냥 사용할 수없는 이유는 무엇입니까? 이런 것을 본 적이 있습니다 …” 라고 생각하시는 것을 알고 있습니다 .
<script id="myJson" type="application/json">
{
name: 'Foo'
}
</script>
<script type="text/javascript">
$(function() {
var x = JSON.parse($('#myJson').html());
alert(x.name); //Foo
});
</script>
… 간단히 말해서, 데이터 홀더로서 “남용”되는 스크립트 태그 일뿐입니다. 모든 종류의 데이터로 그렇게 할 수 있습니다. 예를 들어, 많은 템플릿 엔진은 스크립트 태그를 활용하여 템플릿을 보유 합니다.
원격 파일에서 JSON을로드하는 간단한 옵션 목록이 있습니다.
$.get('your.json')또는 다른 AJAX 방법을 사용하십시오 .- json에 전역 변수를 설정하는 파일을 작성하십시오. (하키 같다).
- 보이지 않는 iframe으로 가져온 다음로드 된 후 해당 콘텐츠를 스크랩합니다 (이를 “1997 모드”라고 함).
- 부두교 사제에게 문의하십시오.
최종 포인트 :
페이지로드 후 원격 JSON 요청도 옵션이 아닙니다.
… 말이 안 돼. AJAX 요청과 귀하를 처리하는 동안 브라우저에서 보낸 요청의 차이점 <script src="">은 본질적으로 아무것도 아닙니다. 둘 다 리소스에 대해 GET을 수행 할 것입니다. HTTP는 스크립트 태그 또는 AJAX 호출로 인해 수행되었는지 여부와 상관없이 서버도 마찬가지입니다.
답변
또 다른 해결책은 서버 측 스크립팅 언어를 사용하고 단순히 json-data 인라인을 포함하는 것입니다. 다음은 PHP를 사용하는 예입니다.
<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>
위의 예는 유형이있는 추가 스크립트 태그를 사용합니다 application/json. 더 간단한 해결책은 JSON을 JavaScript에 직접 포함하는 것입니다.
<script>var jsonData = <?php include('stuff.json');?>;</script>
추가 태그가있는 솔루션의 장점은 JavaScript 코드와 JSON 데이터가 서로 분리되어 있다는 것입니다.
답변
이것이 가능하지 않거나 적어도 지원되지 않는 것처럼 보입니다.
로부터 HTML5 사양 :
데이터 블록 (스크립트와 반대) 을 포함 하는 데 사용되는 경우 데이터는 인라인으로 포함되어야하며 데이터 형식은 type 속성을 사용하여 제공되어야하며 src 속성은 지정되지 않아야 하며 스크립트 요소의 내용은 다음을 준수해야합니다. 사용 된 형식에 대해 정의 된 요구 사항에 따라야합니다.
답변
현재 script태그로는 불가능 iframe하지만 동일한 도메인에서 가져온 경우 가능 합니다.
<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>
위의 내용을 사용하려면 id및 src속성을 필요한 것으로 바꾸십시오 . id(우리는이 상황에서 가정합니다 이는 동일 mySpecialId상점에 사용되는) 데이터 의를 window.jsonData["mySpecialId"].
즉, id및 onload스크립트를 사용하는 모든 iframe에 대해 해당 데이터 가 지정된 아래의 개체에 동기식으로 로드 됩니다.window.jsonDataid
나는 이것을 재미로하고 그것이 “가능하다”는 것을 보여주기 위해했지만 나는 그것을 사용하는 것을 추천 하지 않는다 .
대신 콜백을 사용하는 대안이 있습니다.
<script>
function someCallback(data){
/** do something with data */
console.log(data);
}
function jsonOnLoad(callback){
const raw = this.contentWindow.document.body.textContent.trim();
try {
const data = JSON.parse(raw);
/** do something with data */
callback(data);
}catch(e){
console.warn(e.message);
}
this.remove();
}
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>
크롬에서 테스트되었으며 파이어 폭스에서 작동합니다. IE 또는 Safari에 대해 잘 모르겠습니다.
답변
나는 벤에 동의합니다. 단순 JSON 파일은로드 / 가져올 수 없습니다.
하지만 절대적으로 그렇게하고 싶고 json 파일을 업데이트 할 수있는 유연성이 있다면
my-json.js
var myJSON = {
id: "12ws",
name: "smith"
}
index.html
<head>
<script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
<div id="json-holder"></div>
</body>
답변
이 답변을 확인하십시오 : https://stackoverflow.com/a/7346598/1764509
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
답변
다른 도메인에서 JSON을로드해야하는 경우 :
http://en.wikipedia.org/wiki/JSONP
그러나 잠재적 인 XSSI 공격에 유의 하십시오 :
https://www.scip.ch/en/?labs.20160414
동일한 도메인이면 Ajax를 사용하십시오.
