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

Gui*_*ido 64 html javascript 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>
Run Code Online (Sandbox Code Playgroud)

你认为有可能吗?我已经尝试给html标签一个id并且$(id).replace(data);没有成功.

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

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

niu*_*ech 138

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

document.open();
document.write(newContent);
document.close();
Run Code Online (Sandbox Code Playgroud)

  • +1因为此答案会替换整个文档,而不仅仅是正文标记的内容 (19认同)
  • 这个问题是它在Internet Explorer中不起作用.导致"拒绝访问"错误. (11认同)
  • 在Chrome版本39.0.2171.65 m中,这仅仅附加到文档中. (6认同)
  • 请注意,此方法完全按照请求工作,但不会更新浏览器历史记录.如果在"document.write()"操作之后单击浏览器中的后退按钮,则在重定向之前不会返回页面,您将转到之前的那个. (3认同)
  • @IgnacioSegura:您可以随时使用[history API](https://developer.mozilla.org/de/docs/Web/API/History). (3认同)
  • 对于在 2019 年以上查看此内容的任何人,这对我在最新版本的 Chrome 和 IE 中有效 (2认同)
  • 我个人使用它,因为它也执行 JavaScript,与 innerHTML 方法不同 (2认同)

shf*_*hfx 28

尝试使用jQuery:

$('body').load( url,[data],[callback] );
Run Code Online (Sandbox Code Playgroud)

docs.jquery.com/Ajax/load上阅读更多内容


geo*_*wa4 11

以下是在Prototype中如何做到这一点:$(id).update(data)

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

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

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


The*_*i.9 7

你可以试试

document.getElementById(id).innerHTML = ajax_response
Run Code Online (Sandbox Code Playgroud)


小智 5

最简单的方法是

$("body").html(data);
Run Code Online (Sandbox Code Playgroud)