2014-02-25 4 views
0
<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
    </head> 
    <body> 
    <div id="div1">dv1</div> 
    <div id="div2">dv2</div> 


    <script type="text/javascript"> 
    function getData(){ 
     $.ajax({ 
      type:"GET", 
      url:"j.json", 
      dataType:"json", 
      success: function(jsondata){ 
       output(jsondata);    
      } 
     }); 
    } 

    function output(json){ 

     //var Data = eval('(' + json + ')'); 
     var html = ''; 
     //alert(Data.length); 
     for(var i=0;i<json.length;i++){ 
      html += ' name:' + json[i].name + ' age:' + json[i].age; 
     } 

     document.getElementById('div1').innerHTML = html; 
     document.getElementById('div2').innerHTML = json[0].name; 
    } 

    setTimeout(getData, 3000);  

    </script> 

    </body> 
</html> 

j.json 파일은 위의 코드의내 jquery 스크립트는 Firefox에서만 작동합니다. 이유가 무엇입니까?

[{"name":"aaa","age":18},{"name":"bbb","age":19}] 

목적은 지역 JSON 파일에 데이터 사업부의 콘텐츠를 업데이 트입니다. IE & 크롬에서 시도했지만 어느 것도 작동하지 않습니다. 나는 많은 봤지만 아직도 그것을 알아낼 수 없습니다.

누구든지 힌트를 얻었습니까? 미리 감사드립니다.

+2

setTimeout(getData, 3000);$(document).ready(function(){ your code })를 사용해야합니다 당신은 크롬의 개발자 도구에서 해당 AJAX 호출을 검사 봤어? – Ignas

+0

"리소스를로드하지 못했습니다 : 요청한 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. 'null'은 액세스가 허용되지 않습니다." & "XMLHttpRequest는 file : /// C : /Users/austin/Documents/work/j.json을로드 할 수 없습니다. 'Access-Control-Allow-Origin'헤더가 요청 된 리소스에 없습니다. 허용 된 액세스. " – AustintheCleric

답변

3

웹 서버를 사용합니까?

AJAX는 file://으로 시작하는 URL로는 작동하지 않습니다. 이는 크로스 사이트 스크립팅 (XSS)을 처리하는 데 도움이되는 동일한 출처 요구 사항 때문입니다. 자세한 내용은 here을 참조하십시오.

내가 눈치, 대신

+0

어떻게 로컬 파일을 다루는가? – AustintheCleric

+0

웹 서버 설치 :) – petkopalko

+0

@Austin, 로컬 파일로는이 작업을 수행 할 수 없습니다. – halfer

관련 문제