将另一个 php 页面中的内容加载到索引 php 页面中答案

【问题标题】：loading content from another php page into index php page将另一个 php 页面中的内容加载到索引 php 页面中
【发布时间】：2019-02-19 03:33:29
【问题描述】：

我在 index.php 上有一个 #container1 div。我正在尝试使用 page1.php 中的 #container2 div 的内容加载 #container1。我无法弄清楚为什么这不起作用。

我的文件层次结构是这样的：

Project

 -Js
  --myJs

 -index.php
 -page1.php

index.php:

<!doctype html>
<html dir="rtl">
    <head>
    <base href="..\project\">
        <title></title>
        <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"  />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="js/myJs.js"></script>
    </head>
    <body>
<div id="container">
</div>
</body>
</html>

page1.php

<!doctype html>

    <head>
    <base href="..\project\">
        <title></title>
        <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Assistant" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"  />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="js/myJs.js"></script>
    </head>
    <body>
        <div id="container2">
            <div id="hello" style="height:100px; width:100px; background-color:blue;">
                <p>hello<p>
            </div>
        </div>
    </body>
</html>

myJs.js：

$(document).ready(function(){ 
    $("#container").load("../page1.php #container2> *");
});

index 否则显示得很好。当我手动将 div #hello 放入 #container1 时，它会完美显示。 page1 也显示得很好。

调试并没有告诉我太多。代码成功地进入了函数，但是 hello 只是没有出现。控制台是空的。

【问题讨论】：

看起来您是在 page1.php 上执行 JavaScript，但 意味着 在 index.php 上执行它。
$("#container").load("../page1.php #container2"); 可以吗？
将 hashtage 与 id name 放在一起并不意味着它只会选择 div 数据，这意味着页面将专注于该 div。
你必须使用javascript DOM。加载page1.php的整个html并插入到DOM中，然后选择container2的内容。
@anujarora：这就是 .load() 在幕后所做的：api.jquery.com/load

标签： javascript php jquery html

【解决方案1】：

您正在使用不包含任何 AJAX 功能的 jQuery Slim。
要纠正您的问题，您需要包含 full jQuery 库并稍微更改 jQuery 代码。

将您的 jQuery 脚本标签替换为以下内容：

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

然后，在 myJs.js 中，将代码更改为：

$(document).ready(function(){ 
    $("#container").load("../page1.php #container2");
});

请注意，我已将字符串从 ../page1.php #container2> * 更改为上面的内容。 ~~CSS 选择器不能在加载函数中以这种方式使用，您可以只定位一个元素。~~

您可能需要做的另一件事是删除<base> 标记。这对相对 URL 造成了严重破坏。
然后控制台会告诉你问题Uncaught TypeError: $(...).load is not a function。

【讨论】：

我将 jquery 库更改为您建议的最低版本。正如你所说，我移除了底座，但仍然没有发生任何事情......控制台仍然没有显示任何错误。调试显示正在执行 myJs。
我尝试了选择器，它们实际上也可以工作。就像你说的那样，我猜是纤薄的版本导致了问题。
@Jay 如果您只想加载某些模块，那么您可以查看如下内容：projects.jga.me/jquery-builder 它允许您仅加载您需要减少 jQuery 的模块。当然，如果你加载 slim 是为了节省空间，而不是偶然的。