使用 AJAX 显示表单提交结果？答案

【问题标题】：Displaying A Forms Submission Result Using AJAX?使用 AJAX 显示表单提交结果？
【发布时间】：2011-04-11 02:34:48
【问题描述】：

我正在设计一个网站，其中用户从菜单中选择的所有页面都加载到页面的特定 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_Content div 区域

<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) 加载到 #siteContents div 区域。我现在希望能够使网站功能，以便在提交表单时，将数据发送到脚本（例如 newDataPost.php）并将此脚本注入#siteContents div，就像menu 将选定的页面注入到该 div 中？

我似乎想不出一种方法来做到这一点，任何更有经验的 Web 开发人员都知道在提交表单时将脚本注入 div 的方法吗？

【问题讨论】：

标签： php javascript ajax forms

【解决方案1】：

查看更改表单上的提交事件以执行接受序列化表单的 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
  })

});

【讨论】：