如何用ajax响应替换整个html网页？
Posted
技术标签:
【中文标题】如何用ajax响应替换整个html网页？【英文标题】：How to replace the entire html webpage with ajax response? 【发布时间】：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?
我什至在 *** 上都在网上发现了很多问题。但所有这些都仅限于对 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 分钟（重新启动后）。不再关注页面。永远忽略它。
【参考方案1】：
我没有足够的代表发表评论 (!!) 但@fribu-smart-solutions (https://***.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 页面将如何工作？以上是关于如何用ajax响应替换整个html网页？的主要内容，如果未能解决你的问题，请参考以下文章