Question

首先，我想提一下，我刚刚开始使用HTML，PHP和JS。我想生成一个网站，左侧有一个菜单，右侧有一些内容。经过一些测试，我设法做到了。至少静静地。

到目前为止，我在左侧创建了一个菜单，其中包含一些文本（＆＃34; Project＆＃34;）并点击它将展开并显示一些报告。所有这一切都很好。 See here（我离开了桌边框以更好地展示）

这是我目前用于生成此网站的代码。

<script type="text/javascript">
$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
    $('.click-nav .js ul', this).slideUp();
    $('.clicker').removeClass('active');  
    }
  });
});
</script>


<table border=1 width="100%">
    <tr>
        <td width="200px" valign="top" align="left">
            <div class="click-nav">
                <ul class="no-js">
                    <li>
                        <a href="#" class="clicker">Project1</a>
                        <ul>
                            <li><a href="#">Report1</a></li>
                            <li><a href="#">Report2</a></li>
                            <li><a href="#">Report3</a></li>
                            <li><a href="#">Report4</a></li>
                            <li><a href="#">Report5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </td>
        <td>
            <center>

                    <br><br>
                    <H2>Projects</H2>
                    <br><br><br><br>
                    <div id="KPI"><?php require(DB_REP."KPI_report.php")?></div>
            </center>
        </td>
        <td width="50px"></td>
    </tr>
</table>

好的，我的问题。该网站的目标是动态加载此部分：

<div id="KPI"><?php require(DB_REP."KPI_report.php")?></div>

我希望这样做：单击Report1,2,3,4或5时，我想更改require。所以php要求的是被点击的元素的值。用这样的方式：

<div id="KPI"><?php require(DB_REP."$clicked.php")?></div>

因为后来的按钮Report1，Report2 ..等。也将通过解析可用的报告动态生成。

但到目前为止，我发现无法存储在php变量中单击的元素的值。因为我只在Java脚本中获得了click事件。

我希望我的问题很明确，我将不胜感激。提前谢谢！

Answer 1

您需要的是点击时进行AJAX调用。这样您的JS就会向PHP后端发送请求，然后您可以让PHP响应相应的响应数据，具体取决于请求数据 - 例如“report_id”。

$.ajax({
        url: "index.php",
        data: {report_id:reportId},
        type: "GET"
    })
    .done(function(data){
        // your logic here
    })
    .fail(function(jqXHR){
        console.log(jqXHR);
    })

示例index.php代码：

$filename = "DB_REP".$_GET("report_id").".php";

if (file_exists($filename)) {   
    require($filename);
}

Answer 2

我会制作一个提供报告的php脚本，这个脚本例如有以下php文件名： report_maker.php

现在在report_maker.php中，我会有一个基于GET参数的变量，例如：$ reportId = $ _GET ['reportId'];

所以在你的JavaScript函数中，我会向你的'clicker'发出一个AJAX请求：http://yourdomain.com/path/to/report_maker.php?reportId=(the Id

在https://api.jquery.com/jquery.get/

查看如何使用jQuery.get（）（AJAX请求）

我希望这有道理吗？

Answer 3

如果我理解正确，你应该使用AJAX 例如：

                <ul>
                    <li><a href="#" id="report1">Report1</a></li>
                    <li><a href="#" id="report2">Report2</a></li>
                    <li><a href="#" id="report3">Report3</a></li>
                    <li><a href="#" id="report4">Report4</a></li>
                    <li><a href="#  id="report5"">Report5</a></li>
                </ul>

JS代码：

$(document).ready(function () {

    $("#report1").click(function () {
      //click on report 1 button, then send request to our PHP file
       $.post('ourphpscriptfile.php', { }, function (data) {
           $("#KPI").html(data); //data - this is response from the script
       });
    });
});

您的PHP脚本

<?php

//to do something here

echo "result of script in HTML";

?>

请尝试使用上述结构这个例子的结果 - 动态加载脚本的结果＆＃34; ourphpscriptfile.php＆＃34;通过点击ID = report1

的链接，使用ID＆＃34; KPI＆＃34;进行DIV

Answer 4

好的，如果我理解你正确说的话。您想在单击HTML元素时引入不同的PHP文件。

首先，PHP会在网页访问浏览器之前呈现网页，这意味着一旦网页加载，您就无法动态执行任何操作。

在动态加载PHP内容时，您有两个选择。

使用AJAX从URL端点获取数据，然后在单击时使用该内容填充元素。
最初加载页面中的所有内容，并使用javascript隐藏和显示包含所需内容的单个HTML元素。

Answer 5

无法以交互方式更改php代码。 Php在服务器端呈现，然后结果被发送到javascript运行的浏览器。所以你必须在点击事件的javascript中重新加载#KPI的内容。以下是如何操作的示例。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('.click-nav > ul').toggleClass('no-js js');
        $('.click-nav .js ul').hide();
        $('.click-nav .js').click(function (e) {
            $('.click-nav .js ul').slideToggle(200);
            $('.clicker').toggleClass('active');
            e.stopPropagation();
        });
        $(document).click(function () {
            if ($('.click-nav .js ul').is(':visible')) {
                $('.click-nav .js ul', this).slideUp();
                $('.clicker').removeClass('active');
            }
        });
        $('.click-nav a').click(function () {
            var url_base = '<?=DB_REP;?>';
            var target = $(this).data('target');
            if (target) {
                $.get(url_base + target, function (data) {
                    $("#KPI").html(data);
                    alert("Load was performed.");
                });
            }
        })
    });
</script>

<table border=1 width="100%">
    <tr>
        <td width="200px" valign="top" align="left">
            <div class="click-nav">
                <ul class="no-js">
                    <li>
                        <a href="#" class="clicker">Project1</a>
                        <ul>
                            <li><a href="#" data-target="Report1.php">Report1</a></li>
                            <li><a href="#" data-target="Report2.php">Report2</a></li>
                            <li><a href="#" data-target="Report3.php">Report3</a></li>
                            <li><a href="#" data-target="Report4.php">Report4</a></li>
                            <li><a href="#" data-target="Report5.php">Report5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </td>
        <td style="text-align: center">
            <br><br>
            <h2>Projects</h2>
            <br><br><br><br>
            <div id="KPI">
                <?php require(DB_REP."KPI_report.php")?>
            </div>
        </td>
        <td width="50px"></td>
    </tr>
</table>

Answer 6

为什么ajax适合你[{1}}。你需要使用ajax

如何动态地使用php的require（）功能

6 个答案: