Ajax jQuery表单不能正常工作,导航到PHP文件
Ajax jQuery form not working properly, navigating away to PHP file
我有问题与ajaxForm插件。我希望它在不离开页面的情况下向用户显示结果消息。
问题是,当我提交表单时,而不是在.jumbotron中添加警告。modded(这是表单的div容器),它导航到supportForm.php,只显示回显的数字。
有时确实可以很好地工作,但大多数时候它只是导航到supportForm.php。我不明白为什么它不总是有相同的行为。
下面是HTML表单:
<form id="supportForm" action="supportForm.php" method="post" style="padding-top:10px">
<div class="form-group">
<input type="text" name="subject" id="subject" placeholder="Subject" class="form-control" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="4" name="comment" id="comment" placeholder="Write your message here" required></textarea>
</div>
<button type="submit" class="btn btn-upload" style="margin-top:20px;float:right;" value="">SEND<img src="img/plus.png" style="margin-bottom:5px;padding-left:5px;" /></button>
</form>
下面是Javascript代码:
window.onload = function()
{
$('#supportForm').ajaxForm({
success: function(res) {
console.log(res);
if(res=='1')
{
$(".jumbotron.modded").prepend('<div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Successfully sent. Thank you</div>');
}else{
switch(res)
{
case '0':
$(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Error 1. Please contact mail@asd.com<</div>');
break;
case '-1':
$(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Error 2. Please contact mail@asd.com<</div>');
break;
case '-2':
$(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Error 3. Please contact mail@asd.com</div>');
break;
case '-3':
$(".jumbotron.modded").prepend('<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>Error 4. Please contact mail@asd.com<</div>');
break;
}
}
}
});
}
下面是PHP代码:
if ($row = $db->query("SELECT user FROM tblusers WHERE userId='".$fromId."'")->fetch_array())
{
$fromMail1 = $row['user'];
if($row2 = $db->query("SELECT name,lastname,email FROM tblprofile WHERE userId='".$fromId."'")->fetch_array())
{
$fromMail2 = $row2['email'];
$fromName = $row2['name']." ".$row2['lastname'];
if ($db->query("INSERT INTO tblSupports (supportTitle,supportComment,userId) VALUES ('".$title."','".$comment."','".$fromId."')"))
{
if(sendEmail($fromMail1,$fromMail2,$fromName,$titleClean,$commentClean))
{
echo 1;
}else{// (error 1)
echo 0;
}
}else{//(error 2)
echo -1;
}
}else{//(error 3)
echo -2;
}
}else{//(error 4)
echo -3;
}
我该如何解决这个问题?非常感谢
试试这个
$('#supportForm').ajaxForm({
/* bla-bla-bla*/
return false;
})
但是我真的不明白为什么,你正在使用这个插件。这很容易做到没有任何插件。
$('#submit').click(function(){
$.ajax({
method: "POST",
url: "some.php",
data: $('#supportForm').serialize(),
success: function(data){
alert(data)
}
error: function(error){
alert(error);
}
});
return false;
});
就像这样
请确保在调用此函数之前实际包含了jquery.form.js脚本。你可以在firefox上使用firebug进行检查,例如:在ajaxForm调用上设置一个断点,然后当它停止在那里时,查看jquery.form.js是否在脚本中。
在检查之前尝试。trim,可能会有一些空白
$.trim(res);
编辑:修剪没有工作-是否有可能,onload函数没有触发之前,你点击提交?如果你像下面这样输入console.log,你就会知道它是否确实首先被触发了。这也许可以解释为什么有时有效,有时无效。如果在控制台输出时它总是工作,那么你就得到了答案。
window.onload = function()
{
console.log('fired');
$('#supportForm').ajaxForm({
一定要松开插件,并确保Jquery加载,然后在你的js函数文件中使用这个:
$('#supportForm').on('submit', function(e) {
e.preventDefault();
$(this).find('input[type="submit"]').val('Processing');
$.ajax({
type: "POST",
url: 'http://supportForm.php',
data: $(this).serialize(),
success:function(data) {
if (data == 'success') {
-- Code if form submitted successfully & returned a positive output --
}else{
-- Code if form submitted successfully but did not return a postive outpt --
}
},
error: function() {
-- Code if there is an error in your php --
}
})
});
我对几乎所有表单都使用Ajax,如果一切顺利,我所做的就是在php文件中返回成功。然后,正如你在上面的代码中看到的,'data'将是从php文件中得到的任何回显,所以你可以不断添加if/else情况,你想要回显的任何东西。最后一部分是,如果php文件中有错误,那么该部分将被触发。
- 使用选项卡导航到不同的html文件(html、JavaScript)
- Javascript散列导航&外部js文件
- 如何将jQuery文件添加到导航网站
- 用户配置文件的选项卡导航
- 使用谷歌云端硬盘 API 导航到文件夹
- PHP 脚本:显示文件夹中的图像,并带有限制和<下一步>导航
- 为什么 Netbeans 导航器窗格不使用特定文件名填充 JavaScript 文件
- 导航到子文件夹
- 通过导航栏中的单个播放按钮,在电子书中的每一页加载音频文件
- 使用JQuery和AJAX在html文件之间滑动转换进行导航
- HTML5游戏-工作在IE, Chrome.在FireFox中失败…直到我导航到一个.mp3文件…然后它才工作
- 在html文件之间导航
- 我如何导航到原始的TypeScript文件从JavaScript堆栈在WebStorm与Node
- 让导航滑下来的文件加载只是为主页
- 文件之间的导航
- 如何在Node.js中导航到正确的文件夹
- 如何从外部文件加载导航菜单?(没有Wamp,所有代码必须是'浏览器端')
- 在Visual Studio 2015 + Node.js中显示JavaScript文件的导航栏
- 我如何使用d3.js导航JSON嵌套文件
- 烬在哪里放置数据的通用代码,如通知,用户配置文件在导航栏上