Program Tip

HTML 페이지를 AJAX를 통해 검색된 내용으로 교체

programtip 2020. 11. 22. 20:29
반응형

HTML 페이지를 AJAX를 통해 검색된 내용으로 교체


일반적인 구조의 HTML 페이지가 있습니다.

<html>
  <head>
   <script src="..." ></script>
   <style>...</style>
  </head>
  <body>
   content
  </body>
  <script>
    var success_callback = function(data) {
      // REPLACE PAGE CONTENT & STRUCTURE WITH "data"
    }
    ajax(url, params, success_callback);
  </script>
</html>

가능하다고 생각하십니까? 나는 이미 html 태그에 ID를 부여하려고 시도했지만 $(id).replace(data);성공하지 못했습니다.

이유를 묻지 마십시오. 그게 제가 필요로하는 것입니다 (저는 특별한 "매시업 빌더"사이트에서 일하고 있습니다 ... 긴 이야기입니다).

편집 : 수신 된 콘텐츠의 스크립트를 실행해야 한다는 것을 잊었습니다 <script src="...">. 외부 스크립트도 사용하여 포함되었습니다 .


jQuery로 이것을 시도하십시오 .

$('body').load( url,[data],[callback] );

docs.jquery.com / Ajax / load 에서 자세히 알아보기


가장 간단한 방법은 다음을 사용하여 새 HTML 콘텐츠를 설정하는 것입니다.

document.open();
document.write(newContent);
document.close();

Prototype 에서 수행하는 방법은 다음과 같습니다 .$(id).update(data)

그리고 jQuery :$('#id').replaceWith(data)

그러나 document.getElementById(id).innerHTML=data역시 작동해야합니다.

편집 : Prototype 및 jQuery는 자동으로 스크립트를 평가합니다.


시도해 볼 수 있습니다.

document.getElementById(id).innerHTML = ajax_response

가장 간단한 방법은

$("body").html(data);

나는 당신이 jQuery 또는 비슷한 것을 사용하고 있다고 가정하고 있습니다. jQuery를 사용하는 경우 다음이 작동합니다.

<html>
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
   content
</body>
<script type="text/javascript">
   $("body").load(url);
</script>
</html>

본문 내용을 document.body 핸들러로 대체 할 수 없습니까?

페이지가 다음과 같은 경우 :

<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>

document.body를 사용하여 본문을 대체하십시오.

이것은 나를 위해 작동합니다. BODY 태그의 모든 내용은 지정한 innerHTML로 대체됩니다. html 태그와 모든 하위 항목을 변경해야하는 경우 '문서'의 어떤 태그를 확인해야합니다. 그렇게 할 수 있습니다.

내부에 자바 스크립트 스크립팅이있는 예 :

<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>

This way you can do javascript scripting inside the new content. Don't forget to escape all double and single quotes though, or it won't work. escaping in javascript can be done by traversing your code and putting a backslash in front of all singe and double quotes.

Bare in mind that server side scripting like php doesn't work this way. Since PHP is server-side scripting it has to be processed before a page is loaded. Javascript is a language which works on client-side and thus can not activate the re-processing of php code.

참고URL : https://stackoverflow.com/questions/483745/replace-html-page-with-contents-retrieved-via-ajax

반응형