javascript - 注入(inject) php 元素后重新加载窗口 DOM

Question

我在 php 文件中有两个不同的播放列表，并且有两个按钮 playlist1 和 playlist2。

<div class="player">
    <?php include ('playlist1.php');?>
    <?php include ('playlist2.php');?>
</div>

如果我在主页中单击playlist1，它必须重新加载并附加 <?php include ('playlist1.php');?>在页面加载之前。

如果我在主页中单击playlist2，它必须重新加载并附加 <?php include ('playlist2.php');?>在页面加载之前。

我尝试了一些方法，但没有成功。

$( "playlist1" ).click(function() {
    var append_php = "<?php include ('playlist2.php');?>";
    $('#playlist').append("<div id='playlist2'>"+append_php+"</div>");
});

Answer 1

您试图在 Javascript 中发出 PHP 指令，但这是行不通的。请记住，Javascript 在客户端上运行(即在用户计算机上的 Web 浏览器上)，而 PHP 在服务器上运行。因此，您不能直接在客户端上呈现 PHP - 它必须在服务器上运行。

在服务器上运行需要您导航到不同的页面(可能使用查询字符串来选择您想要呈现的播放列表)或考虑使用 AJAX。

鉴于您说:

If I click playlist1 in the homepage it has to reload and append the before page loads.

If I click playlist2 in the homepage it has to reload and append the before page loads.

我建议您将 PHP 更改为如下所示:

<div class="player">
    <?php
        $playlist = isset($_GET['playlist']) ? $_GET['playlist'] : '1';
        include("playlist".$playlist."php")
    ?>
</div>
<a href="index.php?playlist=1">Playlist 1</a>
<a href="index.php?playlist=2">Playlist 2</a>

这基本上会检查查询字符串，然后根据您传递的内容呈现 playlist1.php 或 playlist2.php 中的内容。默认情况下，它呈现 playlist1.php。它假定您正在运行的 PHP 文件名为 index.php。