Question

我正在设计一个网站，其中用户从菜单中选择的所有页面都被加载到页面的特定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中，就像菜单将选定的页面注入该div？

我似乎无法弄清楚如何做到这一点，任何更有经验的网络开发人员是否都知道在提交表单时将脚本注入div的方法？

Answer 1

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

});

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

1 个答案: