abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax實(shí)戰(zhàn):獲取html內(nèi)容&l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax實(shí)戰(zhàn):獲取html內(nèi)容</title>
</head>
<body>
<h3>用戶登陸</h3>
<form>
<p><label for="email">郵箱：</label><input type="email" id="email" name="email"></p>
<p><label for="password">密碼：</label><input type="password" id="password" name="password"></p>
<p><button type="button">提交</button></p>
</form>
<script src="jquery-3.3.1.js"></script>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
let email = document.getElementsByName('email')[0].value;
let password = document.getElementsByName('password')[0].value;
//1.創(chuàng)建xhr對(duì)象
let xhr = new XMLHttpRequest();
//2.監(jiān)聽(tīng)響應(yīng)狀態(tài)
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 準(zhǔn)備就緒
// 判斷響應(yīng)結(jié)果:
if (xhr.status === 200) {
//在頁(yè)面創(chuàng)建一個(gè)新元素用來(lái)顯示響應(yīng)的數(shù)據(jù)
let p = document.createElement('p');
p.style.color='red';
let json = JSON.parse(xhr.responseText);
//如果json.status==1,表示查詢成功
if(json.status ===1){
p.innerHTML= json.msg;
}else if(json.status ===0){
p.innerHTML= json.msg;
}
document.forms[0].appendChild(p);
btn.disabled=true;
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled = false;
},2000)
} else {
// 響應(yīng)失敗,并根據(jù)響應(yīng)碼判斷失敗原因
alert('響應(yīng)失敗'+xhr.status);
}
} else {
// http請(qǐng)求仍在繼續(xù),這里可以顯示一個(gè)一直轉(zhuǎn)來(lái)轉(zhuǎn)去的圖片
}
};
//3.設(shè)置請(qǐng)求參數(shù)
var url='lianxi/check6.php?email='+email+'&password='+password;
xhr.open('get',url,true);
//4.發(fā)送請(qǐng)求
xhr.send(null);
}
</script>
</body>
</html><?php
header("Content-type: text/html; charset=utf-8");
$email =$_GET['email'];
$pattern="/([a-z0-9]*[-_.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[.][a-z]{2,3}([.][a-z]{2})?/i";
if(preg_match($pattern,$email)){
echo json_encode(['status'=>1,'msg'=>'郵箱格式正確！']);
exit;
} else{
echo json_encode(['status'=>0,'msg'=>'郵箱格式不正確！']);
exit;
}
ajax get方法和post方法有所不同，需要獲取input中的值，再將其改寫成url='lianxi/check6.php?email='+email+'&password='+password;通過(guò)xhr.open('get',url,true)發(fā)送請(qǐng)求。通過(guò)$email =$_GET['email']獲取郵箱驗(yàn)證。
Correcting teacher：查無(wú)此人Correction time：2019-01-17 15:55:53
Teacher's summary：做的非常好。這里要說(shuō)下，post方法，也許愿獲取input值，只是get和post傳值方式不一樣。繼續(xù)加油。