AJAX为HTML表单调用PHP文件无效
AJAX Call to PHP File for HTML Form Not Working
我有一个使用HTML创建的登录表单,如下所示:
<div class= "form-header">Login</div>
<div class= "error-message" id= "login-error-exists"></div>
<form action= "login.php" method= "POST" onsubmit= "loginCheckIncorrect()">
<div class= "form-field">
<div class= "form-text">
username:
</div>
<input type= "text" class= "login-textbox" id= "login-login-username" name= "loginLoginUsername">
</div>
<div class= "form-field">
<div class= "form-text">
password:
</div>
<input type= "password" class= "login-textbox" id= "login-login-password" name= "loginLoginPassword">
</div>
<input type= "submit" value= "Login" class= "signup-confirm">
</form>
正如您所看到的,它是一个简单的表单,通过POST
发送到login.php
。提交此表单后,它会调用一个称为loginCheckIncorrect()
的JavaScript(使用jQuery)函数,如下所示:
function loginCheckIncorrect() {
"use strict";
var loginLoginUsername = $("#login-login-username").val(), loginLoginPassword = $("#login-login-password");
alert("test1");
$.post('usernameIncorrect.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
$("#login-error-exists").html(data);
alert("test2");
event.preventDefault();
return false;
});
alert("test3");
event.preventDefault();
return false;
}
正如您所看到的,此函数创建变量来存储在每个文本框中输入的用户名和密码的值。它发送一个警报(调试),然后使用jQuery.post
函数将变量发送到PHP文件,我将在下面显示。然后(应该)将从PHP文件发回的数据返回到我在HTML表单中的错误div中
然后它调用一个警报(更多的调试),并使用event.preventDefault()
和return false
的组合来(据说)阻止表单提交。这在post函数之后重复。
这是我的PHP代码:
<?php
header("X-XSS-Protection: 1");
include("connect.php");
$username = mysqli_real_escape_string($con, $_POST["loginLoginUsername"]);
$password = mysqli_real_escape_string($con, $_POST["loginLoginPassword"]);
echo "<script>alert('test');</script>";
$sql = mysqli_query($con, "SELECT * FROM main WHERE username='$username' and password='$password'");
$count = mysqli_num_rows($sql);
if ($count == 1) {
echo "";
$_SESSION["username"] = $username;
$_SESSION["password"] = $password;
} else {
echo "username and/or password is incorrect.";
}
?>
当我尝试执行此代码时,它显示的唯一警报是test1
。有人能向我解释一下为什么会这样,更重要的是,我该如何解决它吗?提前谢谢。
在浏览器的调试面板中查看您的网络请求,看看它是否发送了您认为的内容,在PHP中放入一些调试语句,看看哪些内容受到了影响,哪些没有受到影响。
在这种情况下,我认为您可能在javascript中的alert("test1")
之前缺少$('login-login-password')
上的.val()
。
未定义event
。这将是一个问题,表格将提交。回调中的preventDefault是无用的,因为函数已经完成。
1)php文件的名称为login.php
2) 您请求发布的url是用户名不正确.php
因此:
$.post('login.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
$("#login-error-exists").html(data);
alert("test2");
event.preventDefault();
return false;
});
警报测试1是唯一一个因为发布失败而出现的测试。如果发生失败事件,您可能会缓存错误。
尝试,如果你想测试:
$.post('wrongUrl.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
$("#login-error-exists").html(data);
alert("test2");
event.preventDefault();
return false;
})
.fail(function() {
alert( "error" );
});
- 如何在php文件中获取$.post-ajax传递的值
- Javascript运行php文件,然后下载文件
- 通过Ajax将JavaScript函数传递给PHP文件
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 通过ajax到php文件获取单选按钮值
- 每天用javascript包含不同的php文件
- 如何使用javascript调用Php文件
- 如何使用php文件中的GET来获取我在.js文件中声明的变量
- 在CodeIgniter视图中将Javascript或jQuery代码作为PHP文件编写可以吗
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 包括php文件和几个js文件
- 将JavaScript变量传递到HTML输入框和(在PHP文件中使用)
- PHP文件没有't从Javascript应用程序获取$_POST
- 如何显示由ajax调用运行的PHP文件的echo
- 如何将php变量从php文件传递到js文件
- 如何使用javascript/jquery将变量从一个PHP文件传递到另一个PHP文件
- 在同一主机上对PHP文件使用XMLHTTP请求的Javascript违反了同源策略
- 通过Wordpress中的jquery调用运行php文件
- 通过Javascript调用php文件
- 如果($_SERVER[“REQUEST_METHOD”]=“POST”)条件在ajax调用不同的php文件进行验证和提