getJSON이 Safari에서는 작동하지만 Chrome이나 Firefox에서는 작동하지 않는 후에 HTML을 생성하십시오.

안녕하세요 저는 실제로 자바 스크립트와 html/css를 사용하는 초보자입니다.getJSON이 Safari에서는 작동하지만 Chrome이나 Firefox에서는 작동하지 않는 후에 HTML을 생성하십시오.

내 스크립트가 사파리에서 작동하지만 Chrome 및 Firefox에서는 작동하지 않는 이유를 이해할 수 없습니다. 아이디어가 있습니까?

편집 : 크롬 및 파이어 폭스 모두 ul 및 li 요소가 표시되지 않습니다 ... 이전 경고가 작동하지 않습니다. 콘솔에서 오류를 확인하고 게시물을 다시 수정하겠습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
     <div id="patients" style="text-align:center"> 

     </div> 
     <script type="text/javascript"> 
      $.getJSON("http://www.url.com/json", 
         function(data) { 

         var items = []; 
         alert(data[1].patient); 
         alert(data[1].hr); 

         $.each(data, function(index, val) { 
          items.push('<li id="' + index + '">' + val.patient + '<div style="display: none" id="'+val.patient+'"></div></li>'); 
          }); 

         $('<ul/>', { 
         'class': 'my-new-list', 
         html: items.join('') 
         }).appendTo('#patients'); 


         }); 
      </script> 

    </body> 
</html>

출처

2012-07-30 matteosilv

'작동하지 않음'을 정의하십시오. 너 뭐 해봤 니? 어떤 오류가 있습니까? 어떤 경고가 표시되고 표시되지 않습니까? –

나. 당신은 당신의 포스트를 업데이트 할 수 있고, "질문"을 정교하게 할 수 있습니까? 작동하지 않는 것 (예상했던 것, 발생하지 않는 것). 또한, 더 기술적 인 제목을 선택하십시오. –

@RobW : 당신은이 초보자를 도와 충분한 명성을했습니다. 이 질문의 내용을 통해 질문 제목을 쉽게 편집 할 수 있습니다. 새로운 사용자에게 도움을 제공하는 것은 범주 적으로 그들을 투표하고 불평하는 것보다 능동적입니다 ... 도움과 지침을 제공하십시오. –

먼저 자바 스크립트가 페이지에서 실행될 때 이해해야 할 사항이 있습니다.

게시 한 코드에서 브라우저는 먼저 jquery 라이브러리를로드합니다. <script> 태그를 발견하면 $.getJSON() 함수를 실행하려고 시도합니다.

스크립트에서 json 요청이 성공적으로 완료되면 생성 된 html을 #patients에 추가하여 DOM을 수정하려고 시도합니다. 브라우저가 아직 # 환자를 렌더링했는지 보장 할 수 없으므로 100 % 작동하지 않습니다.

페이지로드 이후에만 실행되는 래퍼에 자바 스크립트 코드를 래핑하여 시작해야합니다.

이 작업은 몇 가지 방법으로 수행 할 수 있습니다. 이것이 jQuery의 특정 메소드들이다. 사용하고있는 메소드이기 때문이다.

$(document).ready(function(){ 
    //your code 
});

또는 : 나는 jQuery를 방법 중 하나를 사용하는 것이 좋습니다 것입니다

document.addEventListener('load', function(){ 
    //your code 
}, false);

: 네이티브 자바 스크립트 코드가 같이 보일 것이다

$(function(){ 
    //your code 
});

추가 팁으로 type="text/javascript"을 스크립트 태그에 넣지 않아도됩니다. 모든 브라우저는 스크립트 태그가 자바 스크립트라는 것을 이해합니다. 다행히도 우리는 인터넷 익스플로러의 여러가지 깨진 버전의 예전 시대를 훨씬 능가하고 있습니다.

출처

2012-07-30 11:15:42 Geuis

@ user848778 : 비 유형 용도를 반대합니다. 틀림없이 더 많은 * 재래식 *이기 때문에 ** 항상 ** 스크립트 태그 내용의 MIME 유형을 사용하는 것이 좋습니다. 그러나 나는 Geuis가 말한 다른 모든 것에 동의한다 (+1). DOM에서 즉시 스크립트를 실행하는 두 번째 스크립트를 사용하십시오. –

해결책을 찾으십시오. 불행히도 그것은 작동하지 않습니다. Os X 산 사자에 크롬과 파이어 폭스를 사용하고 있습니다.사파리는 잘 작동합니다. – matteosilv

정말 권장 사항이 아니며 필수적인 첫 번째 단계였습니다. DOM이 준비 될 때까지 스크립트 실행을 지연시킬 * 있습니다. 이제 더 많은 데이터를 게시하면 문제 해결을 시작할 수 있습니다. – Geuis

getJSON이 Safari에서는 작동하지만 Chrome이나 Firefox에서는 작동하지 않는 후에 HTML을 생성하십시오.

답변

관련 문제