PHP和AJAX登录表单
你好，我知道这个主题已经提出过，但没有人像我一样完成了AJAX操作标准。 我是AJAX和jQuery的新手
我在这里遇到的问题是我不确定js函数“ajaxPostCallManip（）”到达“login.php”！
我做了几个alert（），但没有出现...请帮助
HTML代码
<link rel="stylesheet" type="text/css" href="jQuery-Files/jquery.mobile-1.3.1.css"/>
<script type="text/javascript" src="jQuery-Files/jquery-2.0.2.js"></script>
<script type="text/javascript" src="jQuery-Files/jquery.mobile-1.3.1.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<div data-role="page" id="loginDialog">
<header data-role="header">
<h3 style="margin-left: auto; margin-right: auto;">Login or <a href="#regpage"
data-transition="flip">Register</a></h3>
</header>
<div data-role="content">
<form method="POST" action="" onsubmit="check_login(); return false;">
<fieldset data-role="contolgroup">
<div data-role="fieldcontain">
<label for="login_username">Username</label>
<input type="text" name="login_username" id="login_username"
placeholder="username" />
<label for="login_pwd">Password</label>
<input type="password" name="login_pwd" id="login_pwd"
placeholder="password" />
<div style="margin: auto; text-align: center;">
<label for="login_submit" class="ui-hidden-accessible">
Submit</label>
<button onclick="this.form.submit()" value="Submit"
data-inline="true"></button>
<span class="error" id="login_err" name="login_err"
style="display: none; font-size: 12px;
text-align: center;">status</span>
</div>
</div>
</fieldset>
</form>
</div>
</div>
js代码
// AJAX Call handler using method="POST"
function ajaxPostCallManip( str, url, toDoFunc )
{
var xmlhttp; // Request variable
if( window.XMLHttpRequest ) // For modern browsers
xmlhttp = new XMLHttpRequest;
else // For old browsers
xmlhttp = new ActiveXOBject("Microsoft.XMLHttp");
xmlhttp.onreadystatechange=toDoFunc;
xmlhttp.open("POST", url, true);
xmlhttp.send(str);
}
function check_login()
{
// Construct the POST variables [username, password]
var postStr = "username=" + $('#login_username').val() + "&"
+ "password=" + $('#login_pwd').val();
// Call the general purpose AJAX Handler Function
ajaxPostCallManip(postStr, "login.php", function()
// toDoFunc to be performed when server response is ready
{
if( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
{
alert(xmlhttp.responseText);
switch(xmlhttp.responseText)
{
case "1":
$('#login_err').css({'color':'green','display':'block'})
.html('Successful Login');
break;
case "2":
$('#login_err').css({'color':'red','display':'block'})
.html('incorrect username/password')
break;
case "3":
$('#login_err').css({'color':'red','display':'block'})
.html('please fill in all fields')
break;
}
}
});
}
PHP代码
<?php
include('dbManip.php');
echo '<script> alert("Inside login.php"); </script>';
$username = $_POST['username'];
$password = $_POST['password'];
// Just to check that the POST variables arrived safely
echo "<script> alert('username = ' + $username); </script>";
if(!empty($username) && !empty($password))
{
// Fetch data from database
$query = "
SELECT username,password
FROM users
WHERE username = '$username' and password = '$password';
";
// Execute query
$res = mysql_query($query);
// If there is a match for the credentials entered with the database
if(mysql_num_rows($res) == 1)
{
// Fetch information and double check credentials
while($row = mysql_fetch_assoc($res))
{
$db_username = $row['username'];
$db_password = $row['password'];
}
// Compare results with user input
if( $username == $db_username && $password == $db_password)
{
// Credentials are correct - response = 1
echo '1';
}
else
{
// Credentials are incorrect - response = 2
echo '2';
}
}
else
{
// There is no match in the database
// Credentials are incorrect - response = 2
echo '2';
}
}
else
{
// If one or both fields are empty - response = 3
echo '3';
}
?>
首先，你需要重写提交按钮：
<button type="Submit" value="Submit"data-inline="true"></button>
其次，从一个使它成为全局的函数中移动变量：
var xmlhttp; // Request variable
function ajaxPostCallManip( str, url, toDoFunc )
{
if( window.XMLHttpRequest ) // For modern browsers
xmlhttp = new XMLHttpRequest;
else // For old browsers
xmlhttp = new ActiveXOBject("Microsoft.XMLHttp");
xmlhttp.onreadystatechange=toDoFunc;
xmlhttp.open("POST", url, true);
xmlhttp.send(str);
}
我认为你需要重写这一行代码：
<form method="POST" action="" onsubmit="check_login(); return false;">
并将其更改为：
<form method="POST" action="login.php" onsubmit="check_login(); return false;">
确保将login.php保存在与您的html文件相同的文件夹中。
从表单标记中移除method="post"和action=""属性，因为您正在使用ajax调用来定义它