<script> 태그를 사용하여 Ajax 호출

매우 모바일에 적합하지 않은 테이블 기능을 사용하지 않고 테이블 레이아웃 페이지를 복제하는 예제 페이지가 있습니다. ,<script> 태그를 사용하여 Ajax 호출

<style> 
    /* Various CSS Stylings */ 
    </style> 
    <script type="text/javascript"> 
     /*Populate our scripts upon ajax request 
     var sList[0] = ["Color Mutate", "Versatile, Schemebale, string mutation script. Format your text in any color scheme you can dream.", "1.2.0"]; 
     $(document).ready(function() { 
      if (!sList) { 
       $(".table").html("<p>No hosted scripts found</p>"); 
      } else { 
       for (var i = 0;i<=sList.length;i++) { 
        $(".script").append(sList[i][0]); 
        $(".desc").append(sList[i][1]); 
        $(".version").append(sList[i][2]); 
       } 
      } 
     }); */ 
        // moved to main.js 
    </script> 
    <div class="table"> 
     <div class="script"> 
     </div> 

     <div class="desc"> 
     </div> 

     <div class="version"> 
     </div> 
    </div> <!-- /table -->

그리고 불을 지르고에서 볼 때 AJAX 호출이 성공 :

<html> 
    ... 
    <body> 
    <div type="page"> 
     <div class="header"> 
     </div> <!-- /header --> 
     <div class="body"> 
      <script type="text/javascript"> 
           $(document).ready(function() { 
           $(".header").load("/common/header.html"); 
           $(".body").load("/Example/example-home.html"); 
           //Call to superclass function to replace contents after load 
        }); 
       /*$(document).ready(function() { 
        $.ajax({ 
         url: "/Example/example-home.html", 
        }).done(function (data) { 
         $(".body").append(data); 
        }); 
       });*/ 
      </script> --> 
      </div> <!-- /body --> 
     </div class="footer"> 
     </div> <!-- /footer --> 
    </div> <!-- /page --> 
</body> 
</html>

아약스의 모습을 통해 호출되는 파일 :

는 기본적으로 나는 같은 보이는 페이지가 결과 출력은 example-home.html 파일과 동일하게 보이지만 나중에 브라우저에서는 <div class="body"></div> 섹션에 아무 것도 표시하지 않습니다.

아약스 호출의 비동기 특성으로 인해 문제가 될 수 있지만 가능한 해결책을 찾지 못하는 것 같습니다. 뿐만 아니라 아무 소용이 위의 그림과 같이

편집 나는 또한 $(".body").append() 대신 $(this).append()을하고 노력했다. sList[0] = [...];해야 $(document).ready(function(){...}); 및 var sList[0] = [...];을 할 필요가 $(document).ready({...});, 또한 아마도에서 만든 var sList=[]; 선언이 있어야한다 :

EDIT 2 코드를

출처

2013-03-01 Colby R Meier

내 대답을 확인하십시오. http://stackoverflow.com/questions/15148037/jquery-will-not-work-in-file-retrieved-by-java-select-include/15148567#15148567 – Josh

왜 당신은 div.body의 javascript가 아니라 페이지의 끝에 있습니까? – Popnoodles

@ Josh Sigh, 내가 좋아할만한 모듈러로 만들 수는 없을 것 같습니다. 나는 그것을 기본 클래스에 넣고로드 후에 실행 해 보겠습니다. –

두 번째 페이지에 오류가 몇 가지 작업으로 업데이트 첫 페이지.

그런 다음 첫 페이지에, dataType: 'text'를 추가하고 당신은

$(document).ready(function() { 
    $.ajax({ 
     url: "/Example/example-home.html", 
     dataType: 'text' 
    }).done(function (data) { 
     $(".body").append(data); 
    }); 
});

아 잘 작동 찾아 당신이 비동기 적으로로드하는 페이지에서 <html> 태그를 삭제할 수 있습니다.

출처

2013-03-01 02:20:52 Popnoodles

끄덕임, 내가 그걸 찾고있을 때 오류를 수정했다. 이제는 .load()와 수퍼 클래스 레벨 mod 함수를 조합하여 사용할 수있었습니다. 귀하의 답변을 최종 해결책에 상당히 가깝게 받아 들였습니다. 도와 주셔서 감사합니다. –

<script> 태그를 사용하여 Ajax 호출

답변

관련 문제