Заменить HTML-страницу содержимым, полученным через AJAX - PullRequest
63 голосов
/ 27 января 2009

У меня есть 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).replace(data); безуспешно.

Не спрашивайте меня, почему, но это то, что мне нужно (я работаю со специальным сайтом "mashup builder" ... это длинная история).

РЕДАКТИРОВАТЬ : Я забыл сказать, что сценарии в полученном контенте должны выполняться , даже внешние сценарии включаются с использованием <script src="...">.

Ответы [ 7 ]

130 голосов
/ 16 августа 2012

Самый простой способ - установить новый HTML-контент, используя:

document.open();
document.write(newContent);
document.close();
26 голосов
/ 27 января 2009

попробуйте это с jQuery :

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

Подробнее на docs.jquery.com / Ajax / load

11 голосов
/ 27 января 2009

Вот как это сделать в Прототип : $(id).update(data)

И JQuery : $('#id').replaceWith(data)

Но document.getElementById(id).innerHTML=data тоже должен работать.

РЕДАКТИРОВАТЬ: Prototype и jQuery автоматически оценивают скрипты для вас.

7 голосов
/ 27 января 2009

Вы можете попробовать сделать

document.getElementById(id).innerHTML = ajax_response
5 голосов
/ 30 апреля 2014

самый простой способ это

$("body").html(data);
4 голосов
/ 27 января 2009

Разве вы не можете просто попытаться заменить содержимое тела обработчиком document.body?

если ваша страница такая:

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

Просто используйте document.body для замены тела.

Это работает для меня. Все содержимое тега BODY заменяется указанным вами внутренним HTML. Если вам нужно даже изменить тег html и все дочерние элементы, вам следует проверить, какие теги в «документе». способны на это.

Пример со сценариями JavaScript внутри него:

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

Таким образом, вы можете создавать сценарии JavaScript внутри нового контента. Не забывайте избегать двойных и одинарных кавычек, иначе это не сработает. экранирование в javascript может быть выполнено путем обхода вашего кода и размещения обратной косой черты перед всеми одинарными и двойными кавычками.

Имейте в виду, что сценарии на стороне сервера, такие как php, не работают таким образом. Поскольку PHP является серверным сценарием, он должен быть обработан до загрузки страницы. Javascript - это язык, который работает на стороне клиента и поэтому не может активировать повторную обработку php-кода.

4 голосов
/ 27 января 2009

Я предполагаю, что вы используете 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...