将HTML页面替换为通过AJAX检索的内容

时间:2009-01-27 15:04:50

标签: javascript html ajax dom

我有一个典型结构的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);没有成功。

不要问我为什么,但这就是我需要的(我正在使用一个特殊的“mashup builder”网站......这是一个很长的故事)。

编辑:我忘了说收到的内容中的脚本必须执行,甚至包括使用<script src="...">包含的外部脚本。

7 个答案:

答案 0 :(得分:130)

最简单的方法是使用以下方式设置新的HTML内容:

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

答案 1 :(得分:26)

使用 jQuery

尝试此操作
$('body').load( url,[data],[callback] );

docs.jquery.com / Ajax / load

了解详情

答案 2 :(得分:11)

以下是Prototype$(id).update(data)

中的操作方法

jQuery$('#id').replaceWith(data)

document.getElementById(id).innerHTML=data也应该有用。

编辑:Prototype和jQuery会自动为您评估脚本。

答案 3 :(得分:7)

您可以尝试

document.getElementById(id).innerHTML = ajax_response

答案 4 :(得分:5)

最简单的方法是

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

答案 5 :(得分:4)

我假设您正在使用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>

答案 6 :(得分:4)

你难道不能尝试用document.body处理程序替换正文内容吗?

如果您的网页是这样的:

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

只需使用document.body替换正文。

这对我有用。 BODY标记的所有内容都由您指定的innerHTML替换。 如果你甚至需要更改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代码的重新处理。