如何用ajax响应替换整个html网页？答案

【问题标题】：How to replace the entire html webpage with ajax response?如何用ajax响应替换整个html网页？
【发布时间】：2016-02-28 02:37:37
【问题描述】：

在回答具体问题之前，我需要解释几个基本步骤。

首先，有问题的应用程序处理客户在线约会的管理。

客户在填写美容中心治疗的表格并提供他们的信息后进入确认页面。

现在此页面执行 ajax 请求以将约会存储在数据库中。

如果一切顺利，则会显示一个页面，其中包含约会的详细信息以及成功消息。

问题是页面当前只显示在响应中，也就是tab网络控制台浏览器中。

所以我的问题很简单：How can I replace the entire structure of the html page with actual one shown in the response?

我什至在 StackOverflow 上都在网上发现了很多问题。但所有这些都仅限于对 div 的附加。我不用挂也可以替换<html>，怎么改写html页面。我不知道该怎么做，我需要你的一些建议。

为了完整起见，这是返回给我的 ajax 响应 html 代码：

       $.ajax({
          'type': 'POST',
          'url': 'backend_api/ajax_save_appointment',
          'data': postData,
          'success': function(response)
           {
               console.log(response);
           },
           'error': function(jqXHR, textStatus, errorThrown)
           {
               console.log('Error on saving appointment:', jqXHR, textStatus, errorThrown);    
           }
       });

【问题讨论】：

如果您要替换整个页面，请不要使用 AJAX！只需POST 将数据直接发送到服务器，让浏览器完整呈现替换页面。
我知道这一点，但在这种情况下我不得不使用 ajax。
强制如何，究竟是什么？
这里解释太长了
假设您有一个每小时刷新一次的页面。但是它偶尔也会从重新启动中刷新服务器（其他程序员存在，他们重新启动服务器，它发生了）。但是，如果刷新页面在重新启动期间尝试刷新......失败。现在你有一个 404 死页，当你回来时必须手动刷新页面。但是：如果您有 AJAX 刷新，则可以在失败时放置黄色横幅，并将刷新安排在未来 10 分钟（重新启动后）。不再关注页面。永远忽略它。

标签： javascript php jquery html ajax

【解决方案1】：

我没有足够的代表发表评论 (!!) 但@fribu-smart-solutions (https://stackoverflow.com/a/33914275/1428972) 的更新答案应标记为正确答案，使用：

$("html").html($("html", response).html());

这完全通过 ajax 替换了页面。这可以正常工作，而其他人即使使用 "html" 也不能完全正常工作。

我知道这是一篇旧帖子，但它只是解决了我在同一问题上的问题！ :)

【讨论】：

【解决方案2】：

@JudgeProhet 在我看来，您不需要为此目的的 AJAX 请求。这样做没有任何优势。如果整个页面被更新，它可以通过一个普通的 HTTP 请求来完成。如果您想使用 AJAX，您可以简单地使用 JavaScript 重定向到包含约会详细信息的新页面。

$.ajax({
   'type': 'POST',
   'url': '/backend/ajax_save_appointment',
   'data': postData,
   'success': function(response)
   {
      console.log(response);
      // redirect browser to new location
      window.location.href = '/backend/appointment_details';
   },
   'error': function(xhr, status, error)
   {
      console.log('Error on saving appointment:', xhr, status, error);
      // display error message to the user
   }
});

【讨论】：

【解决方案3】：

也许您可以在您的“成功”功能中使用以下代码来重定向到不同的路线。 window.location.href = 'http://host.local/path/to/appointment-details';

【讨论】：

您能否添加一个代码示例，以指导我们的研究？

【解决方案4】：

这里已经处理过这个问题： Replace HTML page with contents retrieved via AJAX

基本上，您可以尝试（我的不好，这不适用于 IE）：

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

或者，因为您使用的是 jquery

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

问候

【讨论】：

如果您阅读了 cmets，您会看到说明这在 IE 上不起作用，并导致在 Chrome 中附加（而不是替换）新内容
我错过了..但第二个命题仍然有效。
这项工作对我来说就像我能够用 Ajax 替换完整的 HTML 以及 j-query 其他功能正常工作...
与 jquery 存在差异，如果您的文档包含带有文档就绪事件的 javascript，则执行 javascript 的方式，它将作为真正的新页面启动的唯一方法是通过 document.write(newContent)接近！

【解决方案5】：

如果响应是html内容，可以使用这行代码：

...
'success': function(response)
       {
           $("body").html(response);
       }
...

更新：

这将很难替换html标签，但是您可以做什么：

...
'success': function(response)
       {
           $("html").html($("html", response).html());
       }
...

你用jquery解析响应，获取html的内容，替换当前html的内容

【讨论】：

多快！问题解决了，非常感谢，祝你天天开心！ :)
@Dillinger 很高兴为您提供帮助

【解决方案6】：

如果您的回复包含<head> 和<body> 标签：

$("html").html(response);.

如果不是，那只是内容，那么做：

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

【讨论】：

是的，如我所说，包含 html 标签，谢谢！祝你有美好的一天:)
所以你的回复是这样的？ <html><head>...</head><body>...</body></html>?如果是这样，那么请使用第一个，而 not 我的第二个（以及 Fribu 的示例）。您对第二个所做的事情是将 html 标签放在正文标签中。 这仅适用于您的回复确实是整页的情况。
@Dillinger 目前尚不清楚哪些（如果有）脚本将适用于新加载的内容。请考虑我上面的评论并完全避免使用 AJAX。
公平点，尽管 OP 只是要求替换页面。所以我假设该页面不包含任何脚本（也许只是纯文本？）。
@LJa 如果它不包含任何脚本，那么 next 页面将如何工作？