如何在另一个 PHP 页面的 <DIV> 中动态加载 PHP 页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19142966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically load a PHP page inside another PHP page's <DIV>?
提问by imprisoned243
I currently have two PHP pages: test1.php and test2.php. Inside test1 are 2 DIVs: one named "SubmitDiv", and one named "DisplayDiv". Inside SubmitDiv is a Submit button. When the user clicks on the Submit button, it should load test2.php inside DisplayDiv. Currently test2.php will only display "Hello World". I want it to load test2.php inside the DisplayDiv so that the test1.php page doesn't need to break stride or otherwise reload.
我目前有两个 PHP 页面：test1.php 和 test2.php。test1 中有 2 个 DIV：一个名为“SubmitDiv”，一个名为“DisplayDiv”。在 SubmitDiv 中是一个提交按钮。当用户点击提交按钮时，它应该在 DisplayDiv 中加载 test2.php。目前 test2.php 只会显示“Hello World”。我希望它在 DisplayDiv 中加载 test2.php，以便 test1.php 页面不需要中断步幅或以其他方式重新加载。
And this is where I am stuck. I am aware that I likely have to make use of AJAX in order for it to dynamically load the test2.php page inside DisplayDiv. How this is done, however, has bested me, and my attempts at it have so far failed. Using the below scripts, which I have pieced together from online searches of this issue, when I try to click on the Submit button - which should load test2.php inside DisplayDiv - instead it just refreshes the whole page and no test2.php is loaded.
这就是我被困的地方。我知道我可能必须使用 AJAX 才能动态加载 DisplayDiv 中的 test2.php 页面。然而，这是如何做到的，我已经打败了我，到目前为止我的尝试都失败了。使用下面的脚本，我从这个问题的在线搜索拼凑起来，当我尝试点击提交按钮时 - 它应该在 DisplayDiv 中加载 test2.php - 相反它只是刷新整个页面并且没有加载 test2.php .
test1.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>
test2.php:
测试2.php：
<html>
<meta charset="utf-8">
<body>
<div id="page" style="background-color:yellow;">
<?php
echo "Hello World.";
?>
</div>
</body>
</html>
回答by DeeperID
If this were something I was working on, I'd change:
如果这是我正在做的事情，我会改变：
<button type="submit" form="QueryForm" onclick="loadQueryResults();">Submit Query</button>
to
到
<button type="submit" form="QueryForm" onclick="return loadQueryResults();">Submit Query</button>
Then I'd change your loadQueryResults function to:
然后我将您的 loadQueryResults 函数更改为：
function loadQueryResults() {
$('#DisplayDiv').load('test2.php');
return false;
}
What this is doing is then returning the value of false to the onclick of the button which as a type of "submit" will, by default, submit the form. Returning any false value on a form submit will cause the form to not submit. Returning false is a general rule when trying to prevent default events from running.
这样做是将 false 的值返回给按钮的 onclick，默认情况下，该按钮作为“提交”类型将提交表单。在表单提交中返回任何错误值将导致表单无法提交。尝试阻止默认事件运行时，返回 false 是一般规则。
回答by David
The structure here is a little strange:
这里的结构有点奇怪：
function loadQueryResults() {
$(function() {
$('#DisplayDiv').load('test2.php');
});
}
You're declaring a function, but inside of that function you call the jQuery function and pass it a function with the code you want to run? Normally the latter is for running something when the document is ready. It shouldn't be needed here. My guess is that this inner code (the one line you want to run) never actually gets executed.
您正在声明一个函数，但在该函数内部调用了 jQuery 函数并将您想要运行的代码传递给它？通常后者用于在文档准备好时运行一些东西。这里应该不需要。我的猜测是这个内部代码（你想运行的那一行）实际上从未被执行过。
Does a simpler version like this work for you?:
像这样更简单的版本对你有用吗？：
function loadQueryResults() {
$('#DisplayDiv').load('test2.php');
}
This should just run the code you want when the function is called, without the various decorations of the jQuery function.
这应该只是在调用函数时运行您想要的代码，而无需 jQuery 函数的各种修饰。
For good measure, you should also return falseto try to prevent the default submit action:
为了更好地衡量，您还应该返回false以尝试阻止默认提交操作：
function loadQueryResults() {
$('#DisplayDiv').load('test2.php');
return false;
}
You can further improve this by using a selector in the call to .load()to pick out only the parts of the DOM that you want. Things like htmland bodymight be stripped out automatically, but explicitly doing things is better than guessing:
您可以通过在调用中使用选择器.load()来仅挑选您想要的 DOM 部分来进一步改进这一点。诸如html和之类的东西body可能会被自动剥离，但明确地做事情比猜测要好：
$('#DisplayDiv').load('test2.php #page');
Of course, now you're also in a situation where you may end up with multiple elements of the id pagein the same DOM, which is invalid. You may want to consider changing some of your ids.
当然，现在你也处于这样一种情况，你可能会page在同一个 DOM 中得到多个 id 元素，这是无效的。您可能需要考虑更改一些 ID。
回答by Lucas Keller
The best way to do this is with the code below:
最好的方法是使用以下代码：
test1.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() {
// 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:
测试2.php：
<div id="page" style="background-color:yellow;">
<?php
echo "Hello World.";
?>
</div>
