Question

我目前有两个PHP页面：test1.php和test2.php。里面的test1是2个DIV：一个名为“SubmitDiv”，一个名为“DisplayDiv”。在SubmitDiv内部是一个Submit按钮。当用户单击Submit按钮时，它应该在DisplayDiv中加载test2.php。目前test2.php只显示“Hello World”。我希望它在DisplayDiv中加载test2.php，以便test1.php页面不需要打破步幅或以其他方式重新加载。

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

test1.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>

test2.php：

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

Answer 1

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

               <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，默认情况下，作为“submit”类型将提交表单。在表单提交上返回任何错误值将导致表单不提交。在尝试阻止默认事件运行时，返回false是一般规则。

Answer 2

这里的结构有点奇怪：

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

您正在声明一个函数，但是在该函数内部，您调用jQuery函数并将其传递给您要运行的代码的函数？通常后者用于在文档准备好时运行某些东西。这里不需要它。我的猜测是这个内部代码（你要运行的那一行）从未实际执行过。

这样的简单版本是否适用于您？：

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

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

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

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

您可以通过在.load()调用中使用选择器来仅选择所需的DOM部分来进一步改进此功能。 html和body之类的内容可能会被自动删除，但明确做事比猜测要好：

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

当然，现在你也可能会在同一个DOM中找到id page的多个元素，这是无效的。您可能需要考虑更改一些ID。

Answer 3

执行此操作的最佳方法是使用以下代码：

<强> test1.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>

test2.php：

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

如何在另一个PHP页面的<div>？</div>中动态加载PHP页面

3 个答案: