gpt4 book ai didi

javascript - AJAX 表单提交不起作用

转载 作者:行者123 更新时间:2023-12-02 17:59:28 26 4
gpt4 key购买 nike

我正在尝试创建一组 JavaScript 函数,以允许我动态加载和提交表单。我已设法创建一个将表单加载到页面中的工作函数,但我无法使提交函数正常工作。发生的情况是,当我单击“提交”时,已经加载的表单(使用 JavaScript 加载函数)消失,原始内容重新出现。提交功能中的警报也不会出现。

我浏览了这个网站并发现了类似的问题,但没有一个使用 AJAX 加载表单然后使用 AJAX 提交,所有其他网站都已经加载了表单。

任何帮助将不胜感激,我对使用 AJAX 非常陌生。

表单

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 加载表单,则需要一个委托(delegate)事件处理程序:

$(document).on('submit', 'form#login', function(event) {
// your AJAX form submission code here
});

当您使用.on()时执行时它会寻找该元素在此时是否存在,但它不存在,这意味着您最终不会绑定(bind)任何事件处理程序。

您的服务器端代码中也存在以下形式的拼写错误:<input type="test"那可能应该是 type="text"

完整代码:

$(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();
});
});

关于javascript - AJAX 表单提交不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20680297/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com