收藏
批改狀態(tài)：未批改
老師批語：
下面將展示Ajax驗證表單代碼及效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax表單驗證</title>
</head>
<body>
<h3>用戶登錄</h3>
<form name="login" method="post" onsubmit="return false">
<p>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email" placeholder="example@gmail.com">
<span style="color: red" id="error_email">*</span>
</p>
<p>
<label for="password">密碼: </label>
<input type="password" id="password" name="password" placeholder="不少于6位">
<span style="color: red" id="error_psw">*</span>
</p>
<p>
<button id="submit" type="button">提交</button>
<span id="result"></span>
</p>
</form>
<script>
var login=document.forms.namedItem('login');
var submit=document.getElementById('submit');
var error_email=document.getElementById('error_email');
var error_psw=document.getElementById('error_psw');
var result=document.getElementById('result');
submit.addEventListener('click',checkUser,false);
function checkUser(){
var user= isEmpty(login,error_email,error_psw);
return user ? verfiy(user,result) : false;
}
function isEmpty(form,error1,error2){
var email=form.email.value.trim();
var password=form.password.value.trim();
if(email.length===0){
error1.innerText='郵箱不能為空';
form.email.focus();
return false;
}else if(password.length===0){
error2.innerText='密碼不能為空';
form.password.focus();
return false;
}
return {
email:email,
password:password
}
}
function verfiy(user,result){
var request = new XMLHttpRequest();
// 2. 監(jiān)聽請求變化
request.onreadystatechange = function () {
if (request.status === 4) {
if (request.status === 200) {
// 請求成員, 更新頁面中的DOM元素
console.log(request.responseText);
result.innerHTML=request.responseText;
}
}
};
// 如果是POST請求, 3-4步會發(fā)生變化
// 3. 初始化請求
request.open('post', 'check.php', true);
// 4. 設置請求頭
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 5. 發(fā)送請求
var data='email='+user.email+'&password='+user.password;
request.send(data);
}
login.email.addEventListener('input', function (){
error_email.innerText = ''; // 清除郵箱錯誤提示
result.innerText = ''; // 清除服務器返回的驗證提示
}, false);
login.password.addEventListener('input', function (){
error_psw.innerText = ''; // 清除密碼錯誤提示
result.innerText = ''; // 清除服務器返回的驗證提示
}, false);
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
下面是選項卡代碼及效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
text-align: center;
}
.box {
width: 538px;
height: 500px;
background-color: white;
border: 1px solid #ccc;
margin: 20px auto;
color: #363636;
}
.box > ul {
margin: 0;
padding: 0;
background-color: #f8f8f8;
/*border-bottom: 1px solid #ccc;*/
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width: 90px;
height:36px;
float:left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
.box ul + span {
float:right;
width:90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box ul + span >a {
color: #696969;
text-decoration: none;
}
.box li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div {
display: none;
}
.box div ul {
margin: 0;
padding: 10px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
/*background-color: yellow;*/
}
.box div ul li a {
color: #636363;
text-decoration: none;
}
.box div ul li a:hover {
color: #000;
}
.box div ul li span {
float: right;
color: red;
}
</style>
</head>
<body>
<h2>仿PHP中文網(wǎng)選項卡</h2>
<div class="box">
<ul>
<!-- 創(chuàng)建四個選項卡,并設置第一個為當前激活高亮狀態(tài) -->
<li class="active">技術文章</li>
<li>網(wǎng)站源碼</li>
<li>原生手冊</li>
<li>推薦博文</li>
</ul>
<span><a href="">更多下載>></a></span>
<!-- 其實你在頁面中看到列表,其實都已經(jīng)在頁面中了,只是隱藏了起來,實際開發(fā)過程,大多是通過Ajax請求來動態(tài)獲取 -->
<div style="display: block;">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<script>
var box=document.getElementsByClassName('box')[0];
//獲取 無序列表
var ul=box.getElementsByTagName('ul')[0];
//獲取無序列表中l(wèi)i的內(nèi)容
var tab=ul.getElementsByTagName('li');
//選項卡下DIV中的內(nèi)容
var list=box.getElementsByTagName('div');
for( var i=0;i<tab.length;i++){
tab[i].index=i;
tab[i].addEventListener('click',getData,false);
}
function getData(){
for(var i=0;i<tab.length;i++){
tab[i].className='';
list[i].style.display='none';
}
this.classList.add('active');
list[this.index].style.display='block';
var n=this.index;
var request=new XMLHttpRequest();
request.onreadystatechange=function(){
if (request.readyState===4){
list[n].innerHTML=request.responseText;
}
};
request.open('get','data.php?p='+n,true);
request.send(null);
}
//機器人點擊第一頁
var defalutTab=ul.firstElementChild;
defalutTab.addEventListener('click',show,false);
var event=new Event('click');
defalutTab.dispatchEvent(event);
function show(){
var request=new XMLHttpRequest();
request.onreadystatechange=function () {
if (request.readyState===4){
list[0].innerHTML=request.responseText;
}
};
request.open('get','data.php?p=0',true);
request.send(null);
}
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
根據(jù)上方 學習到Ajax給我們帶來的用戶體驗。
選項卡中的自動點擊需要掌握及大量的代碼體驗。
學會如何使用Ajax POST 和GET
以及在使用Ajax的時候要想的全面一些 獲取那些東西 從什么地方獲取等。
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
