你好 我知道這個問題已經提出過,但沒有人像我一樣做過AJAX操作標準。我是新手AJAX和jQueryPHP和AJAX登錄表格
我在這裏的問題是,我不確定js函數「ajaxPostCallManip()」達到「login.php」!
我已經做了幾個警報()秒,但沒有顯示了,請幫助
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';
}
?>
我建議你使用jQuery庫,並降低你的AJAX調用的一行代碼移除表單標籤
method="post"
和action=""
屬性? – DevlshOne我當時也是一樣的大聲笑 – Misters
在你看看jQuery之後,我建議你也看看[PDO](http://php.net/manual/en/book.pdo.php),因爲這段代碼容易受到攻擊SQL注入。 [Here's](http://forums.devshed.com/php-faqs-and-stickies-167/how-to-program-a-basic-but-secure-login-system-using-891201.html)一個漂亮的體面的登錄教程 – Phas1c