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

69

我有一个具有典型结构的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="...">。

— 圭多
source

3

我真的很想了解有关要求的更多信息。我想不出任何需要这种东西的东西。

— Ionuț G. Stan，

1

您正在使用哪个js库？重新标记以包含它。

— geowa4，2009年

它似乎可以使用普通的JavaScript（我正在使用Chrome）。document.getElementsByTagName（'html'）[0] .innerHTML ='在此处输入HTML';

— 达明·戈尔丁

28

使用jQuery尝试一下：

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

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

— shfx
source

154

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

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

— 纽泰
source

23

+1，因为此答案将替换整个文档，而不仅仅是正文标签的内容

— CodeToad

11

问题是它在Internet Explorer中不起作用。导致“访问被拒绝”错误。

— mylesmg

6

在Chrome版本39.0.2171.65 m中，这仅附加到文档中。

— skibulk

4

请注意，此方法完全可以按要求工作，但不会更新浏览器历史记录。如果在执行“ document.write（）”操作后在浏览器中单击“后退”按钮，则不会在重定向之前返回到该页面，而是会转到该页面之前的页面。

— Ignacio Segura

3

@IgnacioSegura：您始终可以使用history API。

— serv-inc

11

这是在Prototype中执行的方法：$(id).update(data)

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

但是document.getElementById(id).innerHTML=data应该也可以。

编辑：原型和jQuery自动为您评估脚本。

— geowa4
source

7

你可以尝试做

document.getElementById(id).innerHTML = ajax_response

— 反9
source

6

最简单的方法是

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

— 洛佩斯·达勒斯特
source

它首先需要jQuery。如果您需要立即完成它而不加载外部库，那么这不是一个好选择。

— DAH

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>

— 马吕斯
source

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代码的重新处理。

— Xaddict
source

2

是的，您几乎是正确的，但是不执行使用<script src =“ ...”>包含的外部脚本。

— Guido

您可以遍历代码，并使其按以下步骤动态地加载（并执行）这些文件：codehouse.com/javascript/articles/external这样，可以动态添加找到的所有脚本...还是太多了？

— xaddict