收藏
批改狀態(tài)：合格
老師批語：課堂案例,還是要多看看 ,php部分先忽略
表單事件與表單元素
//focus 獲取焦點
//blur 失去焦點
//change 失去焦點觸發(fā)檢測數據變化
//input 實時檢測數據變化觸發(fā)
//select change / input 效果一樣,因為select的焦點和值是綁定的
//option 支持name屬性 可以用namedItem()獲取
//獲取option的索引 var selectedIndex = select.selectedIndex
//select.options 返回所有option innerText可以用label替換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-POST</title>
</head>
<body>
<!--登陸表單-->
<h2>用戶登陸</h2>
<form action="" name="login">
<p>
<label for="username">用戶：</label>
<input type="text" name="username" id="username" placeholder="請輸入用戶名">
</p>
<p>
<label for="email">郵箱：</label>
<input type="text " name="email" id="email" placeholder="請輸入郵箱">
</p>
<p>
<label for="pwd">密碼：
</label>
<input type="password" name="pwd" id="pwd">
</p>
<p>
<label for="select">選項：</label>
<select name="select" id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var input = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.pwd.addEventListener('blur',isEmpty,false);
function isEmpty(ev) {
if (ev.target.value.length ===0){
if (ev.target.nextElementSibling === null){
var tips = document.createElement('span');
tips.style.color = 'red';
switch(ev.target.name){
case 'username':
tips.innerText = '用戶名不能為空';
break;
case 'email':
tips.innerText = '用戶名不能為空';
break;
case 'pwd':
tips.innerText = '用戶名不能為空';
break;
default:
tips.innerText = '未定義錯誤';
}
ev.target.parentNode.appendChild(tips);
}
ev.target.focus();
}
}
login.username.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.pwd.addEventListener('input',clearTips,false);
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
// console.log(tips);
if (tips !== null){
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click',check,false);
function check(ev) {
var username = login.username.value;
var email = login.email.value;
var pwd = login.pwd.value;
var select = login.select.value;
if (username.length===0 ||email.length===0 ||pwd.length===0){
ev.target.removeEventListener('click',check,false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
var data = 'username='+username+'&email='+email+'&pwd='+pwd+'&select='+select;
request.addEventListener('readystatachange',successCallback,false);
request.open('POST', 'php/check.php', true);
request.setRequestHeader('content-type','application/x-www-form-urlencoded;charest=utf-8');
request.send(data);
}
function successCallback(ev) {
if (request.readyState===4){
console.log(request.responseText);
}
}
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
AJAX異步請求
四步驟：1.創(chuàng)建：請求對象；2.監(jiān)聽：成功回調；3. 設置：請求參數；4.發(fā)送：異步請求
兩種方式GET與POST
GET方式
需要用encodeURIComponent():對值中的非法字符進行編碼,如空格等,解碼:decodeURIComponent()
var data = encodeURIComponent(input.value);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-GET</title>
</head>
<body>
<label for="user-id">用戶ID：</label>
<input type="text" name="user_id" id="user-id">
<p id="tips"></p>
<script>
var input = document.getElementById('user-id');
var tips = document.getElementById('tips');
var request = new XMLHttpRequest();
input.addEventListener('keypress',getUserInfo, false);
function getUserInfo(ev) {
if (ev.key === 'Enter'){
switch (true) {
case input.value.length === 0 :
tips.innerHTML = '<span style="color: red">請輸入正確的用戶ID</span>';
return false;
case isNaN(input.value):
tips.innetHTML = '<span style="color: red">ID必須為整數</span>';
return false;
case input.value.length >0 && input.value.length <3:
tips.innerHTML = '<span style="color: red">用戶ID長度為3</span>';
return false;
default:
request.addEventListener('readystatechange',successCallback,false);
var data = encodeURIComponent(input.value);
request.open('GET', 'php/user_info.php?user_id='+data,true);
request.send(null);
}
}
}
function successCallback() {
if (request.readyState === 4){
tips.innerHTML = request.responseText;
}
}
input.addEventListener('input',function () {
tips.innerHTML = null ;
},false);
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
1.需要設置請求頭setRequestHeader（'content-type', 'application/x-www-form-urlencoded;charset=utf-8'
）；
2.以鍵值對封裝傳輸的數據 request.addEventListener('readystatechange', successCallback, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-POST</title>
</head>
<body>
<!--登陸表單-->
<h2>用戶登陸</h2>
<form action="" name="login">
<p>
<label for="username">用戶：</label>
<input type="text" name="username" id="username" placeholder="請輸入用戶名">
</p>
<p>
<label for="email">郵箱：</label>
<input type="text " name="email" id="email" placeholder="請輸入郵箱">
</p>
<p>
<label for="pwd">密碼：
</label>
<input type="password" name="pwd" id="pwd">
</p>
<p>
<label for="select">選項：</label>
<select name="select" id="select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var input = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.pwd.addEventListener('blur',isEmpty,false);
function isEmpty(ev) {
if (ev.target.value.length ===0){
if (ev.target.nextElementSibling === null){
var tips = document.createElement('span');
tips.style.color = 'red';
switch(ev.target.name){
case 'username':
tips.innerText = '用戶名不能為空';
break;
case 'email':
tips.innerText = '用戶名不能為空';
break;
case 'pwd':
tips.innerText = '用戶名不能為空';
break;
default:
tips.innerText = '未定義錯誤';
}
ev.target.parentNode.appendChild(tips);
}
ev.target.focus();
}
}
login.username.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.pwd.addEventListener('input',clearTips,false);
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
// console.log(tips);
if (tips !== null){
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click',check,false);
function check(ev) {
var username = login.username.value;
var email = login.email.value;
var pwd = login.pwd.value;
var select = login.select.value;
if (username.length===0 ||email.length===0 ||pwd.length===0){
ev.target.removeEventListener('click',check,false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
var data = 'username='+username+'&email='+email+'&pwd='+pwd+'&select='+select;
request.addEventListener('readystatechange',successCallback,false);
request.open('POST', 'php/check.php', true);
request.setRequestHeader('content-type','application/x-www-form-urlencoded;charest=utf-8');
request.send(data);
}
function successCallback(ev) {
if (request.readyState===4){
console.log(request.responseText);
}
}
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
