我目前有两个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>