logo标签列表

如何使用AJAX响应替换整个HTML网页？

javascriptphpjqueryhtmlajax
21

在进入具体问题之前，我需要解释一些基本步骤。

首先，所涉及的应用程序处理客户在线预约管理。

客户填写美容中心治疗表单并提供他们的信息后，来到确认页面。

现在该页面执行ajax请求将预约存储在数据库中。

如果一切顺利，将显示一个包含预约详细信息和成功消息的页面。

问题在于该页面目前仅在响应中显示，即在浏览器的网络控制台选项卡中。

因此，我的问题很简单：如何使用响应中实际显示的整个HTML页面替换HTML页面的整个结构？

我在网络上甚至在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);    
           }
       });
2
如果您要替换整个页面，请不要使用AJAX！直接将数据POST到服务器，让浏览器完全渲染替换页面。 - Alnitak
我知道这一点，但在这种情况下我被迫使用ajax。 - Dillinger
强制如何，确切地说？ - Alnitak
这里的文本内容太长，无法在此进行解释。 - Dillinger
假设您有一个每小时刷新一次的页面。但是它从中刷新的服务器偶尔也会重新启动（存在其他程序员，他们重新启动服务器，这种情况经常发生）。但是如果正在重新启动期间尝试刷新的页面...将失败。现在你有一个404死页面，当你回来时必须手动刷新页面。但是：如果您使用AJAX刷新器，您可以在失败时放置黄色横幅，并安排在未来10分钟内进行刷新（重新启动后）。不再关注该页面。永远忽略它。 - TheSatinKnight
6个回答
33
如果你的响应包含<head>和<body>标签，那么使用以下代码：$("html").html(response);。 如果没有这些标签，只有内容，那么请使用以下代码：$("body").html(response);。请注意保留HTML标记。
是的，正如我所说，HTML标签已经包含了，谢谢！祝你有美好的一天 :) - Dillinger
那么你的回应是这个吗？<html><head>...</head><body>...</body></html>？如果是这样的话，那就使用第一个，而不是我的第二个（以及Fribu的例子）。你用第二个做的事情是把HTML标签放在body标签里。这仅适用于您的响应确实是完整页面的情况下。 - L Ja
@Dillinger，目前尚不清楚新加载的内容能否使用任何脚本。请考虑我上面的评论并避免完全使用 AJAX。 - Alnitak
公平的观点，尽管原作者只是要求替换页面。因此我假设该页面不包含任何脚本（可能只有纯文本？）。 - L Ja
@LJa 如果它不包含任何脚本，那么下一页将如何工作？ - Alnitak
显示剩余2条评论
12

如果响应是HTML内容，您可以使用以下代码：

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

更新:

替换html标签可能会比较困难，但您可以做到以下几点：

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

你可以使用 jQuery 解析响应内容，获取 HTML 内容并替换当前 HTML 的内容。

好快啊！问题解决了，非常感谢。祝你有个愉快的一天！ :) - Dillinger
@Dillinger 很高兴能帮助你。 - Alexander_F
7
这个问题已经在这里得到了解决： 使用AJAX替换HTML页面内容 基本上，你可以尝试以下方法（遗憾的是这在IE上不起作用）：
document.open();
document.write(newContent);
document.close();

或者，如果您正在使用jQuery

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

敬礼

如果你读了注释，你会看到有注明这在IE上不起作用，并且在Chrome中会导致新内容被追加（而不是替换）。 - Alnitak
我错过了它..但第二个建议仍然有效。 - AdZaf
这项工作对我来说很有效，我能够使用Ajax替换整个HTML，并且j-query其他功能也能正常运行，没有任何问题... - Er Parwinder Hirkewal
如果您的文档包含具有“document ready”事件的JavaScript，则与jQuery存在差异，JavaScript执行方式也会有所不同。唯一以真正新页面开始的方式是使用“document.write(newContent)”方法！ - foxdanni
0
你能否添加一段代码示例，以便我们的研究更有针对性？ - JudgeProphet
0
@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
   }
});
0

我没有足够的声望来留下评论（！！），但是@fribu-smart-solutions的UPDATE答案（https://dev59.com/ylsX5IYBdhLWcg3wW-b-#33914275）应该被标记为正确的，使用：

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

这个通过ajax完全替换页面。这样做是正确的，而其他人即使使用“html”也不能完全工作。

我知道这是一个旧帖子，但它刚好解决了我在同一问题上的困扰！:)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接