Javascript 如何用ajax响应替换整个html网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33914245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace the entire html webpage with ajax response?
提问by Dillinger
Before going to the specific question I need to explain a few basic steps.
在进入具体问题之前，我需要解释几个基本步骤。
First, the application in question deals with the management of appointments online by customers.
首先，该应用程序涉及客户在线预约的管理。
The customer after filling a form with the treatments for the beauty center and providing their information comes to the confirmation page.
顾客在填写美容中心的治疗表格并提供他们的信息后进入确认页面。
Now this page performing an ajax request to store the appointment on the database.
现在此页面执行 ajax 请求以将约会存储在数据库中。
If everything is successful is shown a page containing the details of the appointment with the success message.
如果一切顺利，将显示一个页面，其中包含约会的详细信息和成功消息。
The problem is that the page is currently displayed only in the response, that is, in the tab network console browser.
问题是该页面当前只显示在响应中，即标签网络控制台浏览器中。
So my question is simple: How can I replace the entire structure of the html page with actual one shown in the response?
所以我的问题很简单： How can I replace the entire structure of the html page with actual one shown in the response?
I found a lot of questions on the web even on StackOverflow. But all of this is limited on an append to a div. I do not need to hang but also replace the <html>, how to rewrite the html page. I have no idea how to do this and I need some advice from you.
我在网络上甚至在 StackOverflow 上也发现了很多问题。但所有这些都仅限于附加到 div。我不需要挂也可以替换<html>，如何重写html页面。我不知道该怎么做，我需要你的一些建议。
For completeness, this is the code that comes back to me ajax response 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);
}
});
回答by L Ja
If your response includes the <head>and <body>tags:
如果您的回复包含<head>和<body>标签：
$("html").html(response);.
$("html").html(response);.
If not, and it's only content, then do:
如果没有，而且只是内容，那么执行：
$("body").html(response);.
$("body").html(response);.
回答by Fribu - Smart Solutions
if the response is the html content, you can use this line of code:
如果响应是 html 内容，则可以使用以下代码行：
...
'success': function(response)
{
$("body").html(response);
}
...
update:
更新：
this will be hard to replace the html tag, but what you can do:
这将很难替换 html 标记，但是您可以做什么：
...
'success': function(response)
{
$("html").html($("html", response).html());
}
...
you parse the response with jquery, getting the content of html and replacing the content of the current html
你用jquery解析响应，获取html的内容并替换当前html的内容
回答by AdZaf
this question has already been treated here: Replace HTML page with contents retrieved via AJAX
这个问题已经在这里处理过： 用 AJAX 检索的内容替换 HTML 页面
Basically, you may try (My bad this is not working on IE):
基本上，您可以尝试（我不好这不适用于 IE）：
document.open();
document.write(newContent);
document.close();
or, since you are using jquery
或者，因为您使用的是 jquery
$("body").html(data);
Regards
问候
回答by Artist Unknown
Perhaps you can use following code in your 'success'-function to redirect to a different route. window.location.href = 'http://host.local/path/to/appointment-details';
也许您可以在“成功”功能中使用以下代码重定向到不同的路线。window.location.href = ' http://host.local/path/to/appointment-details';
回答by Artist Unknown
@JudgeProhet It seems to me that you do not need AJAX request for this purpose. There is no advantage in doing it this way. If the entire page is updated it could be done by an ordinary HTTP request. If you want to use AJAX, you could simply use JavaScript to redirect to new page, which contains appointment details.
@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
}
});
回答by Steve Weatherill
I don't have enough reps to leave a comment (!!) but the UPDATE answer by @fribu-smart-solutions (https://stackoverflow.com/a/33914275/1428972) should be marked as the correct one, using:
我没有足够的代表发表评论 (!!) 但@fribu-smart-solutions ( https://stackoverflow.com/a/33914275/1428972)的更新答案应该标记为正确的答案，使用：
$("html").html($("html", response).html());
This fully replaces the page via ajax. This does the job properly whereas others even using "html"doesn't fully work.
这完全通过ajax替换了页面。这可以正常工作，而其他人甚至使用"html"也不能完全工作。
I know this is an old post but it just solved my problem on the same issue! :)
我知道这是一篇旧帖子，但它刚刚解决了我在同一问题上的问题！:)
