使用AJAX显示表单提交结果
Displaying A Forms Submission Result Using AJAX?
我正在设计一个网站,其中用户从菜单中选择的所有页面都加载到页面的特定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
})
});
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- iFrame表单提交并在结果后发出警报
- 表单提交后保留数据库查询结果
- 将HTML文件中的表单提交到PHP文件,并以相同的HTML显示结果
- 2表单提交显示相同的AJAX结果
- 在跨域表单提交和处理结果方面需要帮助
- 如何使用jQuery表单插件获取表单提交结果
- 由于异步表单提交,结果不一致
- html表单提交不会在元素中永久显示javascript的结果
- Javascript表单提交没有'不能给出正确的结果
- 返回表单提交的结果从 PHP 到 JavaScript,区分成功和失败
- 在新选项卡或窗口显示表单提交的结果
- 如何在表单提交后停止重定向到API调用结果
- 如何使表单提交返回指定的结果使用AJAX &JSON
- 使用AJAX显示表单提交结果