abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax表單驗證</title> <style type="text/css"> </style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax表單驗證</title>
<style type="text/css">
</style>
</head>
<body>
<form action="">
用戶名: <input type="email" name="email" >
<br>
密碼: <input type="password" name="password">
<br>
<button type="submit" name="submit" onsubmit="return false;">登錄</button>
<p></p>
</form>
<script type="text/javascript">
let btn = document.getElementsByTagName('button').item(0);
let p = document.getElementsByTagName('p')[0];
btn.onclick = function(){
// 1創(chuàng)建 xhr
let xhr = new XMLHttpRequest();
//2 監(jiān)聽響應(yīng)狀態(tài)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //準(zhǔn)備就緒
//判斷響應(yīng)結(jié)果
if(xhr.status == 200){
// 響應(yīng)成功,通過xhr對象的responseText屬性可以獲取響應(yīng)的文本,此時是html文檔內(nèi)容
let data =JSON.parse(xhr.responseText);
let color = 'red';
p.style.display = 'block';
if(data.status == 1){
color = 'green';
}
p.innerHTML = data.msg;
p.style.color = color;
btn.setAttribute('disabled',true); //等效語法
setTimeout(function(){
btn.disabled = false;
p.style.display = 'none';
if(data.status == 1){
location.href = "admin.html";
}
},2000)
}else{
alert("請求失敗"+xhr.status);
}
}
}
//3 設(shè)置請求參數(shù) 第三個參數(shù)是異步 true 同步false
xhr.open('post','*****',true);
//4 設(shè)置頭信息,將內(nèi)容類型設(shè)置為表單提交方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 5 發(fā)送請求
let data = {
email : document.getElementsByName('email')[0].value,
password : document.getElementsByName('password')[0].value
}
//轉(zhuǎn)換為字符串
let data_json = JSON.stringify(data);
//加個data= 這樣成為鍵值對 方便后臺拿取數(shù)據(jù)
xhr.send('data='+data_json);
//btn.disabled = true; //禁用按鈕,防止重復(fù)點(diǎn)擊
return false;
}
</script>
</body>
</html><?php
$servername = "127.0.0.1";
$username = "*******";
$word = "*******";
$table = "user";
header('Content-Type: text/html; charset=utf-8');
header('Access-Control-Allow-Origin:*'); //設(shè)置全部域名可請求
header('Access-Control-Allow-Methods: GET, POST'); //設(shè)置請求方式
header('Access-Control-Allow-Credentials:true');
// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $word);
$user = json_decode($_POST['data']); //轉(zhuǎn)換為對象
$email = $user->email;
$password = $user->password;
if(!$email){
echo json_encode(['status'=>0,'msg'=>'請輸入郵箱']) ;
exit;
$email = "test1";
}
if(!$password){
echo json_encode(['status'=>0,'msg'=>'請輸入密碼']) ;
exit;
$password = "1.11";
}
// 檢測連接
if ($conn){
//echo "鏈接成功";
//設(shè)置編碼
$cc = $conn->query("set names utf8;");
//選庫
$cc = $conn->query("use ****;");
//var_dump($cc); //執(zhí)行成功
$sql = "SELECT * FROM `user` WHERE name='{$email}' AND menoyNum={$password}";
//執(zhí)行sql語句
$res = $conn->query($sql);
if($res){
$row = null;
$row = mysqli_fetch_all($res);
echo json_encode(['status'=>1,'msg'=>'登錄成功,正在跳轉(zhuǎn)...']) ;
}else{
echo json_encode(['status'=>0,'msg'=>'郵箱或密碼錯誤,登錄失敗!']) ;
}
}else{
die("連接失敗: " . $conn->connect_error);
//設(shè)置編碼為utf8
}
exit;
?>
Correcting teacher：韋小寶Correction time：2019-02-11 09:19:38
Teacher's summary：寫的很不錯 使用ajax進(jìn)行無刷新提交，這里的form標(biāo)簽甚至都可以不用了！