1

我目前有两个 PHP 页面：test1.php 和 test2.php。test1 内部有 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>
4

3 回答 3

6

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

               <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 是尝试阻止默认事件运行时的一般规则。

于 2013-10-02T17:27:09.320 回答
0

这里的结构有点奇怪：

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 部分。类似htmland之类的东西body可能会被自动剥离，但明确地做事情比猜测要好：

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

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

于 2013-10-02T17:26:06.063 回答
0

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

测试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>
于 2013-10-02T18:01:18.907 回答