网页中的PHP脚本反馈_Php_Jquery_Html_Css_Apache

网页中的PHP脚本反馈

php jquery html css apache

网页中的PHP脚本反馈,php,jquery,html,css,apache,Php,Jquery,Html,Css,Apache,我正在尝试构建一个web门户，该门户运行一个php脚本，该脚本在windows中调用批处理文件，然后执行一个powershell脚本，该脚本运行powercli从vmware vcenter获取所需信息。所有结果将发送到名为f1.txt的文件中，f1.html源于此文件并显示输出。下面是我的所有代码下面的解决方案可以工作，但是，当f1.php脚本运行并等待底层powershell脚本f1.bat->f1.ps1的输出时，我需要显示一些输出，而不是空白页面当网页等待php脚本完成时，一些进度报

我正在尝试构建一个web门户，该门户运行一个php脚本，该脚本在windows中调用批处理文件，然后执行一个powershell脚本，该脚本运行powercli从vmware vcenter获取所需信息。所有结果将发送到名为f1.txt的文件中，f1.html源于此文件并显示输出。下面是我的所有代码

下面的解决方案可以工作，但是，当f1.php脚本运行并等待底层powershell脚本f1.bat->f1.ps1的输出时，我需要显示一些输出，而不是空白页面

当网页等待php脚本完成时，一些进度报告或php脚本的直接反馈就可以了

例如：加载。。。带有闪烁的点或脚本本身的输出

我在f1.php中尝试了flush（）方法和ob_flush（）方法，但它只会给我一个带有输出的空白屏幕，一旦php脚本完成运行，导航栏就会加载到该输出下面。页面完全被破坏了

如何以最少的代码操作获得所需的结果。如果任务需要ajax或javascript，那么我也愿意这样做

我在index.php中有以下内容

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
    display: block;
}
</style>
</head>
<body>

<div class="navbar navbar-inverse ">
<div class="container-fluid">


            <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">VMware VC Reports</a>
            </div>

                    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
        <li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>

            <ul class="dropdown-menu">

        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
            <ul class="dropdown-menu">
            <li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
            <li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
        </li>
            </ul>

            </li>
            </ul>
        </ul>
                    </div>
</div>
</div>

<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
});
</script>

</body>
</html>


.下拉子菜单{
位置：相对位置；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
页边顶部：-1px；
}
@介质（最小宽度：979px）{
ul.nav li.下拉菜单：悬停>ul.下拉菜单{
显示：块；
}
}
ul.nav li.下拉子菜单：悬停>ul.下拉菜单{
显示：块；
}












$（文档）.ready（函数（）{
$（'.dropdown子菜单a.test'）。打开（“单击”，函数（e）{
$（this.next（'ul'）.toggle（）；
e、 停止传播（）；
e、 预防默认值（）；
});
});

我在f1.php文件中有以下内容

<?php
system("f1.bat");
header("Location:http://mickey.example.com/view/f1.html");
exit;
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
    display: block;
}
</style>
</head>
<body>

<div class="navbar navbar-inverse ">
<div class="container-fluid">


            <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">VMware VC Reports</a>
            </div>

                    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
        <li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>

            <ul class="dropdown-menu">

        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
            <ul class="dropdown-menu">
            <li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
            <li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
        </li>
            </ul>

            </li>
            </ul>
        </ul>
                    </div>
</div>
</div>

<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
});
</script>

</body>
</html>


.下拉子菜单{
位置：相对位置；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
页边顶部：-1px；
}
@介质（最小宽度：979px）{
ul.nav li.下拉菜单：悬停>ul.下拉菜单{
显示：块；
}
}
ul.nav li.下拉子菜单：悬停>ul.下拉菜单{
显示：块；
}












$（文档）.ready（函数（）{
$（'.dropdown子菜单a.test'）。打开（“单击”，函数（e）{
$（this.next（'ul'）.toggle（）；
e、 停止传播（）；
e、 预防默认值（）；
});
});

我在f1.html中有以下内容

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
@media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}
}
ul.nav li.dropdown-submenu:hover > ul.dropdown-menu {
    display: block;
}
</style>
</head>
<body>

<div class="navbar navbar-inverse ">
<div class="container-fluid">


            <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">VMware VC Reports</a>
            </div>

                    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
        <li class="dropdown"><a class="dropdown" data-toggle="dropdown" href="#">Vcenters<span class=caret></span></a>

            <ul class="dropdown-menu">

        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">San Jose Vcenter<span class="caret"></span></a>
            <ul class="dropdown-menu">
            <li><a tabindex="-1" href="http://mickey.example.com/view/f1.php">ESX Info</a></li>
            <li><a tabindex="-1" href="http://mickey.example.com/view/f2.php">Firmware Info</a></li>
        </li>
            </ul>

            </li>
            </ul>
        </ul>
                    </div>
</div>
</div>

<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
});
</script>

<script type="text/javascript">
<!--
var iframe = document.createElement("iframe");
iframe.src = "f1.txt";
iframe.width = "20000";
iframe.height = "20000";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
//-->
</script>

</body>
</html>


.下拉子菜单{
位置：相对位置；
}
.下拉子菜单.下拉菜单{
排名：0；
左：100%；
页边顶部：-1px；
}
@介质（最小宽度：979px）{
ul.nav li.下拉菜单：悬停>ul.下拉菜单{
显示：块；
}
}
ul.nav li.下拉子菜单：悬停>ul.下拉菜单{
显示：块；
}












$（文档）.ready（函数（）{
$（'.dropdown子菜单a.test'）。打开（“单击”，函数（e）{
$（this.next（'ul'）.toggle（）；
e、 停止传播（）；
e、 预防默认值（）；
});
});

欢迎来到StackOverflow！请阅读：问题现在清楚了吗？还是需要更多信息？