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

IT技术 javascript html ajax dom
2021-02-04 03:01:29

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

6个回答

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

document.open();
document.write(newContent);
document.close();
+1 因为这个答案替换了整个文档，而不仅仅是 body 标签的内容
2021-03-27 03:01:29
在 Chrome 版本 39.0.2171.65 m 中，这只是附加到文档中。
2021-03-27 03:01:29
请注意，此方法完全按照要求工作，但不会更新浏览器历史记录。如果您在“document.write()”操作后单击浏览器中的后退按钮，您将不会返回重定向前的页面，而是返回到它之前的页面。
2021-03-27 03:01:29
@IgnacioSegura：您可以随时使用历史 API。
2021-04-03 03:01:29
问题在于它在 Internet Explorer 中不起作用。导致“拒绝访问”错误。
2021-04-09 03:01:29

用jQuery试试这个：

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

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

以下是在Prototype 中执行此操作的方法：$(id).update(data)

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

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

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

你可以尝试做 

document.getElementById(id).innerHTML = ajax_response

最简单的方法是

$("body").html(data);
它首先需要jQuery。如果您需要立即完成而不加载外部库，这不是一个好选择。
2021-03-20 03:01:29
其它你可能感兴趣的问题
上一篇Javascript 确认弹出是，否按钮而不是确定和取消 下一篇getCurrentPosition() 和 watchPosition() 在不安全的来源上被弃用