代码之家 › 专栏 › 技术社区 › Guido

用AJAX检索的内容替换HTML页面

dom ajax html javascript

Guido · 技术社区 · 17 年前

我有一个典型结构的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构建器”网站……说来话长)。

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

7 回复 | 直到 9 年前

shfx 17 年前

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

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

127

niutech 13 年前

试试这个实例 :

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

阅读更多 docs.jquery.com / Ajax / load

geowa4 17 年前

以下是如何在 Prototype : $(id).update(data)

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

但是 document.getElementById(id).innerHTML=data 也应该工作。

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

redochka 14 年前

你可以试试

document.getElementById(id).innerHTML = ajax_response

LopesDaLeste 12 年前

最简单的方法是

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

Marius 17 年前

你不能试着用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代码的重新处理。

xaddict 17 年前

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