如何在另一个 PHP 页面的 <DIV> 中动态加载 PHP 页面 - How to dynamically load a PHP page inside another PHP page's <DIV>?

我目前有两个PHP页面：test1.php和test2.php。测试1 中有 2 个 DIV：一个名为"SubmitDiv"，另一个名为"DisplayDiv"。SubmitDiv 内部是一个提交按钮。当用户单击"提交"按钮时，它应该在 DisplayDiv 中加载 test2.php。目前test2.php只会显示"Hello World"。我希望它在 DisplayDiv 中加载 test2.php，以便 test1.php 页面不需要中断步伐或以其他方式重新加载。

这就是我被困住的地方。我知道我可能必须使用 AJAX 才能让它在 DisplayDiv 中动态加载 test2.php 页面。然而，如何做到这一点已经击败了我，到目前为止，我的尝试都失败了。使用以下脚本，这是我从此问题的在线搜索中拼凑出来的，当我尝试单击提交按钮时 - 它应该在 DisplayDiv 中加载 test2.php - 相反，它只是刷新整个页面，没有加载 test2.php。

测试1.php：

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
    function loadSubmitResults() {
        $(function() {
            $('#DisplayDiv').load('test2.php');
        });
    }
</script>
<body>
    <div id="page">
        <form id="SubmitForm" method="post">
            <div id="SubmitDiv" style="background-color:black;">
                <button type="submit" form="SubmitForm" onclick="loadSubmitResults();">Submit</button>
            </div>
        </form>
        <div id="DisplayDiv" style="background-color:red;">
            <!-- This is where test2.php should be inserted -->
        </div>
    </div>
</body>

测试2.php：

<html>
<meta charset="utf-8">
<body>
    <div id="page" style="background-color:yellow;">
        <?php
            echo "Hello World.";
        ?>
    </div>
</body>
</html>

如果这是我正在做的事情，我会改变：

               <button type="submit" form="QueryForm" onclick="loadQueryResults();">Submit Query</button>

自

               <button type="submit" form="QueryForm" onclick="return loadQueryResults();">Submit Query</button>

然后我会将您的 loadQueryResults 函数更改为：

function loadQueryResults() {
    $('#DisplayDiv').load('test2.php');
    return false;
}

然后，这样做是将 false 的值返回给按钮的 onclick，默认情况下，该按钮作为一种"提交"类型将提交表单。在表单提交时返回任何错误值将导致表单无法提交。返回 false 是尝试阻止默认事件运行时的一般规则。

这里的结构有点奇怪：

function loadQueryResults() {
    $(function() {
        $('#DisplayDiv').load('test2.php');
    });
}

您

正在声明一个函数，但是在该函数内部，您调用jQuery函数并向其传递一个包含要运行的代码的函数？通常，后者用于在文档准备就绪时运行某些内容。这里不需要它。我的猜测是，这个内部代码(你想要运行的一行(从未真正被执行过。

像这样更简单的版本适合您吗？

function loadQueryResults() {
    $('#DisplayDiv').load('test2.php');
}

这应该只在调用函数时运行你想要的代码，而没有 jQuery 函数的各种装饰。

为了更好地衡量，您还应该返回false以尝试阻止默认提交操作：

function loadQueryResults() {
    $('#DisplayDiv').load('test2.php');
    return false;
}

您可以通过在调用 to .load() 中使用选择器来进一步改进这一点，以仅挑选出所需的 DOM 部分。像html和body这样的东西可能会被自动删除，但明确地做事比猜测要好：

$('#DisplayDiv').load('test2.php #page');

当然，现在您也处于这样一种情况：您最终可能会在同一 DOM 中得到 id page的多个元素，这是无效的。您可能需要考虑更改某些 ID。

最好的方法是使用以下代码：

测试1.php：

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// Handler for .ready() called.
$('#SubmitForm').submit(function( event ) {
    $.ajax({
            url: 'test2.php',
            type: 'POST',
            dataType: 'html',
            data: $('#SubmitForm').serialize(),
            success: function(content)
            {
                $("#DisplayDiv").html(content);
            }  
    });
    event.preventDefault();
});
});
</script>
<body>
    <div id="page">
        <form id="SubmitForm" method="post">
            <div id="SubmitDiv" style="background-color:black;">
                <button type="submit" class="btnSubmit">Submit</button>
            </div>
        </form>
        <div id="DisplayDiv" style="background-color:red;">
            <!-- This is where test2.php should be inserted -->
        </div>
    </div>
</body>

测试2.php：

<div id="page" style="background-color:yellow;">
    <?php
        echo "Hello World.";
    ?>
</div>