我正在设计一个网站，其中用户从菜单中选择的所有页面都加载到页面的特定div区域，并且想知道我如何创建当用户提交表单时的功能，而不是去浏览器然后导航到表单，让它将结果加载到相同的div部分。
我的索引页是这样的:
<body>
<?php
echo "<div id='"siteLogo'">";
require("public/includes/templates/header.php");
echo "</div>";
"<div id='"siteMenu'">";
require("public/includes/templates/menu.php");
echo "</div>";
echo "<div id='"siteContent'">";
require("public/includes/templates/home.php");
echo "</div>";
echo "<div id='"siteFooter'">";
require("public/includes/templates/footer.php");
echo "</div>";
?>
当页面呈现时，它采用这种形式，当然包括其内容:
<body>
<div id="siteLogo">
</div>
<div id="siteLogo">
</div>
<div id="siteLogo">
</div>
<div id="siteLogo">
</div>
</body>
然后呈现页面时，有四个div区域，每个区域包含各自的内容。然后使用以下代码(呈现HTML和用于AJAX加载的Javascript)将从菜单(menu.php)中选择的所有项加载到web_Contentdiv区域
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="contact.php">Help</a></li>
<li><a href="help.php">Contact</a></li>
</ul>
-----------------------------------------------
$('#siteMenu a').click(function(e)
{
$('#web_Content').load($(this).attr('href'), function()
{
})
});
现在，当我添加一个表单到我的菜单，它按照预期，并加载内容(form.php)到#siteContentsdiv区域。我现在想能够使网站的功能，以便当表单提交时，数据被发送到一个脚本(newDataPost.php为例)，并有这个脚本注入到#siteContentsdiv像其中菜单注入选定的页面到该div的方式?
我似乎无法找出一种方法来做到这一点，可以任何更有经验的web开发人员知道在其中注入一个脚本到一个div提交表单的方式?
更改表单上的提交事件，以执行接受序列化表单的ajax调用。像这样:
$('form').submit(function(e) {
e.preventDefault();
$.get('some_endpoint.php', {form_data :$(this).serialize() }, function (data) {
// your callback to insert new html into the div
})
});