Question

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

首先，有关申请涉及客户在线约会的管理。

客户填写表格并提供美容中心的护理并提供信息后，请到确认页面。

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

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

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

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

即使在StackOverflow上我也在Web上发现了很多问题。但所有这一切都限于对div的附加。我不需要挂起但也可以替换<html>，如何重写html页面。我不知道该怎么做，我需要你的一些建议。

为了完整性，这是回复给我的代码ajax response 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);    
           }
       });

Answer 1

如果您的回复包含<head>和<body>代码：

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

如果没有，并且它只是内容，那么请执行：

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

Answer 2

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

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

更新

这将很难替换html标签，但你能做什么：

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

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

Answer 3

此问题已在此处理： Replace HTML page with contents retrieved via AJAX

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

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

或者，因为你正在使用jquery

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

此致

Answer 4

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

Answer 5

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

{% extends "posts/base.html" %}
{% block content %}
<div class="container mt-5">
     <div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        {% for fpost in featured_post %}
      <div class="carousel-item active">
        <img src="{{fpost.thumbnail.url}}" class="d-block img-responsive" height="650px !important"  width="100%">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{fpost.title}}</h5>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</div>
{% endblock %}

Answer 6

我没有足够的代表留下评论（!!），但是@ fribu-smart-solutions（https://stackoverflow.com/a/33914275/1428972）的UPDATE答案应使用以下标记为正确的答案：

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

这将完全通过ajax替换页面。这样可以正确地完成工作，而其他人甚至使用"html"都不能完全工作。

我知道这是一篇旧文章，但它只是解决了我在同一问题上的问题！：）

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

6 个答案: