AJAX 调用后通过 JS 打印 HTML答案

【问题标题】：Printing HTML via JS after AJAX callAJAX 调用后通过 JS 打印 HTML
【发布时间】：2018-10-08 15:03:31
【问题描述】：

假设我有 3 个 PHP 页面。

Page1 是用户正在查看的页面。
Page2 包含在 Page1 中，此列表项并在每个项旁边都有一个删除按钮。
Page3 是我的解析文件，我通过 AJAX 发送信息以更新我的数据库无需离开/刷新页面。

我将所有数据发送到我的第三个 PHP 文件的 JS 如下所示：

$(".delete").bind("click", function() {
    var id = event.target.id;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
            console.log(this.responseText);

            //document.getElementById("message").innerHTML = 'deleted';
            //$("#message").html('deleted');
        }
    };
    xmlhttp.open("POST", "page3.php?delete="+id, true);
    xmlhttp.send();
});

这工作正常，我可以看到控制台中返回的内容，但我无法添加消息。消息 div 位于 page2。

我能想到这可能发生的唯一原因是因为 page2 包含在 page1 中，尽管 div 存在于 DOM 中并且我没有在控制台中收到 JS 错误说 div 不能找到了。

【问题讨论】：

如果您的标记是正确的，我看不出 div#message 不会被更改的任何原因。它是否可能通过zIndex、display 或visibility 属性隐藏？
@zfrisch 感谢您的评论，不，我实际上是在检查元素以确保。在做了一些测试之后，当消息 div 在 page1 上时它可以工作，所以我认为它必须与它的包含方式有关。
是否存在多个具有相同 id 的元素？ page2如何包含在page1中？
@epascarello 感谢您的评论，不，只有一个具有该 ID 的 div。它是这样包含的：<?php include_once("page2.php"); ?>

标签： javascript jquery

【解决方案1】：

通过重新设计并将 div 放在 page1 上解决了这个问题。

仍然不完全确定为什么它不能在包含的页面上工作，但这绝对是原因。

【讨论】：

【解决方案2】：

您没有检查页面是否已加载

window.onload = function(){
    document.getElementById("message").innerHTML = 'deleted';
}

或

$( document ).ready(function() {
    $("#message").html('deleted');
});

【讨论】：

不，事实并非如此。我的整个 JS 都包裹在 $(document).ready(function(){...} 中，包括上面的整个函数
下一个建议 - 确保消息 div 可见。
查看以前的 cmets
我的意思是。正在写入消息，但您看不到它，因为包含该消息的元素已隐藏。