Javascript AJAX表单提交功能不正常
我正在尝试创建一组JavaScript函数,允许我动态加载和提交表单。我已经设法创建了一个工作函数,将表单加载到页面中,但无法使提交函数正常工作。当我单击submit时,已经加载的表单(使用JavaScript加载函数)消失,原始内容重新出现。此外,提交功能中的警报也不会出现 我已经浏览了整个网站,发现了类似的问题,但没有一个是使用AJAX加载表单,然后使用AJAX提交的,其他所有网站都已经加载了表单 任何帮助都将不胜感激,我对使用AJAX非常陌生 表格Javascript AJAX表单提交功能不正常,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我正在尝试创建一组JavaScript函数,允许我动态加载和提交表单。我已经设法创建了一个工作函数,将表单加载到页面中,但无法使提交函数正常工作。当我单击submit时,已经加载的表单(使用JavaScript加载函数)消失,原始内容重新出现。此外,提交功能中的警报也不会出现 我已经浏览了整个网站,发现了类似的问题,但没有一个是使用AJAX加载表单,然后使用AJAX提交的,其他所有网站都已经加载了表单 任何帮助都将不胜感激,我对使用AJAX非常陌生 表格 echo $Error; echo '&
echo $Error;
echo '<form id="login" method="post">';
echo '<input type="test" name="Email" placeholder="exsample@exsample.exsample"';
if(isset($Email)) echo "value = ".$Email;
echo ' />'."<br />";
echo '<input type="password" name="Pass" placeholder="Password" />'."<br />";
echo '<input type="submit" value = "Login"/>'."<br />";
echo '</form>';
提交功能
function Page(url,output)
{
var Request = '';
if (window.XMLHttpRequest)
{
Request=new XMLHttpRequest();
}
else
{
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
Request.onreadystatechange=function()
{
if (Request.readyState==4 && Request.status==200)
{
document.getElementById(output).innerHTML = Request.responseText;
}
}
Request.open("GET",url,true);
Request.send();
}
$(function () {
$('form#login').on('submit', function(e) {
alert('Found');
$.ajax({
type: 'post',
url: 'php/login.php',
data: $(this).serialize(),
success: function (complete) {
document.getElementById('output').innerHTML = complete;
}
});
e.preventDefault();
});
});
如果使用AJAX加载表单,则需要委托事件处理程序:
$(document).on('submit', 'form#login', function(event) {
// your AJAX form submission code here
});
当您使用.on()
执行时,它会寻找该元素在该点上存在,但它不存在,这意味着您不会绑定任何事件处理程序
表单的服务器端代码中还有一个输入错误:
警报是否正常工作。?控制台中是否有任何错误。?如果您使用的是e.preventDefault,这是否会停止提交时的工作?不,它不会发出任何警报,忘了提及它。@而且,是的,它会,但这正是他们想要的。您不想同时通过AJAX请求和常规表单提交。@AnthonyGrist得到了它:)我不确定您的意思,我应该在哪里插入上面的部分。@user2131323您应该使用它而不是$('form#login')。on('submit',function(e){…})代码>您当前拥有的;我已经编辑了我的答案以包含完整的代码,只需将一个替换为另一个。
$(function () {
$(document). on('submit', 'form#login', function(e) {
alert('Found');
$.ajax({
type: 'post',
url: 'php/login.php',
data: $(this).serialize(),
success: function (complete) {
document.getElementById('output').innerHTML = complete;
}
});
e.preventDefault();
});
});