时间戳

首页 > 解决方案 > 为什么重新加载对 ajax 不可见，但从控制台可见？

javascript - 为什么重新加载对 ajax 不可见，但从控制台可见？

问题描述

所以，我有一个相当古老的项目，当我比现在经验少得多时（因此这种方法一定非常糟糕），现在查看我的旧代码，我得到了一些关于背后机制的问题。

我有index.php，input.php当我在表单上按提交时，表单上index.php的数据被发送到input.php然后验证数据，放入 MySQL 数据库。如果那一刻一切正常，服务器将作为响应返回：

<script>location.reload();</script>

这是我发送该请求的方式：

$.ajax({
    url: $("#input_form").attr("action"),
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(info){$("body").html(info);}
});

因此，基本上，如果一切顺利，页面将被迫重新加载。它有效，我们可以在页面上看到新数据。

问题是：

1）为什么页面重新加载实际上是不可见的？背后是什么机制？至于我将整个主体的 html 更改为内部带有 reload 功能的脚本标记，因此它应该类似于（如果不一样）放入$('body').html("<script>location.reload()</script>")浏览器控制台但差异非常明显 - 如果我把它放在浏览器控制台中然后刷新按钮更改，当前活动浏览器选项卡的图标也更改为重新加载图标，这不会随请求发生

2）为什么 Chrome 开发工具将重新加载视为来自（网络选项卡）的重定向并将整个 html index.php 生成的响应作为响应，如果我在控制台中input.php运行则不会发生这种情况？$('body').html("<script>location.reload()</script>")

标签： javascriptphpjqueryhtmlajax

解决方案

我认为我们可以同意 alocation.reload();简单地重新加载整个页面。它也可以是一个完全不同的页面。

$("body").html(info);完全替换了页面元素的内容，<body> ... </body>但那不是整个页面。HTML 页面更多。它有标题、a <head>、脚本等。当您使用$("body").html(info);.

JQuery 文档说.html()使用浏览器的innerHTML属性。确切的机制是：

  1. 指定的值被解析为 HTML，从而生成一个DocumentFragment 对象，该对象表示新元素的新 DOM 节点集。
  2. 元素的内容将替换为新DocumentFragment中的节点。因为所有节点都一次插入到文档中，所以如果单独插入每个插入的节点，只会触发一次重排和渲染，而不是可能触发一次。

该页reload()面对文档进行了完整的重建，包括所有内容。它构建了一个 DOM 注释树，并尝试渲染它。可能是在构建整个页面时触发了几次重排和渲染。例如，当一个 CSS 文件被加载，或者当更多的 HTML 源代码进来时。许多页面也有 Javascript，在加载后会稍微修改页面。这就是您在完成重新加载时看到的内容。

推荐阅读