收藏
批改狀態(tài)：未批改
老師批語(yǔ)：
使用Ajax驗(yàn)證表單數(shù)據(jù)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax實(shí)戰(zhàn):表單驗(yàn)證</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>
<!--
為了submit和ajax提交是二個(gè)完全不同的進(jìn)程, 一個(gè)同步一個(gè)異步
在異步Ajax提交表單時(shí), 為防止表單默認(rèn)submit行為,有如下幾種方案.
1. 最簡(jiǎn)單: button type="button", 默認(rèn)的是type="submit"
2. form標(biāo)簽添加 onsubmit="return false", 禁用表單提交
3. JS中使用submit()方法
-->
<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');
// 為提交按鈕設(shè)置點(diǎn)擊事件, 并分配一個(gè)事件響應(yīng)函數(shù)(只需要名稱即可)
submit.addEventListener('click', checkUser, false);
// 主函數(shù): 定義提交事件函數(shù), 內(nèi)部會(huì)調(diào)用二個(gè)子函數(shù),完成主要功能
function checkUser() {
// 1.數(shù)據(jù)非空驗(yàn)證
var user = isEmpty(login, error_email, error_psw);
// 2. Ajax異步驗(yàn)證
// 如果非空驗(yàn)證返回false,說(shuō)明驗(yàn)證失敗, 就不必再到服務(wù)器進(jìn)行Ajax驗(yàn)證了, 直接返回false
// 否則就將需要驗(yàn)證的數(shù)據(jù)(對(duì)象字面量user)做為參數(shù),調(diào)用異步驗(yàn)證器: verfiy()
return user ? verfiy(user, result) : false;
}
/*****************************************************************/
// 非空驗(yàn)證函數(shù)
function isEmpty(form, error1, error2) {
// 獲取表單控件中的內(nèi)容,并清空前后空格
var email = form.email.value.trim();
var password = form.password.value.trim();
// 先驗(yàn)證郵箱,再驗(yàn)證密碼,并正確的設(shè)置焦點(diǎn)與返回值
if (email.length === 0) {
error1.innerText = '郵箱不能為空';
login.email.focus();
return false;
} else if (password.length === 0){
error2.innerText = '密碼不能為空';
login.password.focus();
return false;
}
// 非空驗(yàn)證通過(guò), 則返回郵箱與密碼組成的對(duì)象字面量,方便后續(xù)代碼調(diào)用
return {
email: email,
password: password
}
}
/*****************************************************************/
function verfiy(user, result) {
//1.創(chuàng)建request對(duì)象
var request = new XMLHttpRequest();
//2.監(jiān)聽響應(yīng)狀態(tài)
request.onreadystatechange = function(){
if (request.readyState === 4) { // 準(zhǔn)備就緒
console.log(request.responseText);
// 設(shè)置驗(yàn)證提示
result.innerHTML = request.responseText;
// 驗(yàn)證通過(guò)的跳轉(zhuǎn)功能, 需要使用JSON來(lái)實(shí)現(xiàn)
}
return false;
};
//3.設(shè)置請(qǐng)求參數(shù)
request.open('post','admin/check.php',true);
//4. 設(shè)置頭信息,將內(nèi)容類型設(shè)置為表單提交方式(固定模板語(yǔ)法結(jié)構(gòu))
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.發(fā)送請(qǐng)求
// 準(zhǔn)備要提交的數(shù)據(jù)
var data = 'email=' + user.email + '&password=' + user.password;
request.send(data);
}
// input: 當(dāng)用戶修改錯(cuò)誤數(shù)據(jù)時(shí), 提示信息應(yīng)該消失
login.email.addEventListener('input', function (){
error_email.innerText = ''; // 清除郵箱錯(cuò)誤提示
result.innerText = ''; // 清除服務(wù)器返回的驗(yàn)證提示
}, false);
login.password.addEventListener('input', function (){
error_psw.innerText = ''; // 清除密碼錯(cuò)誤提示
result.innerText = ''; // 清除服務(wù)器返回的驗(yàn)證提示
}, false);
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
最終顯示效果：
使用ajax制作選項(xiàng)卡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項(xiàng)卡</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>
<!-- 掌握循環(huán)操作 -->
<h2>仿PHP中文網(wǎng)選項(xiàng)卡</h2>
<div class="box">
<ul>
<!-- 創(chuàng)建四個(gè)選項(xiàng)卡,并設(shè)置第一個(gè)為當(dāng)前激活高亮狀態(tài) -->
<li class="active">技術(shù)文章</li>
<li>網(wǎng)站源碼</li>
<li>原生手冊(cè)</li>
<li>推薦博文</li>
</ul>
<span><a href="">更多下載>></a></span>
<!-- 其實(shí)你在頁(yè)面中看到列表,其實(shí)都已經(jīng)在頁(yè)面中了,只是隱藏了起來(lái),實(shí)際開發(fā)過(guò)程,大多是通過(guò)Ajax請(qǐng)求來(lái)動(dòng)態(tài)獲取 -->
<div style="display: block;">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<script>
// 獲取標(biāo)簽
// 這里獲取頁(yè)面元素的對(duì)象是有步驟和技巧的,要注意
// 首先用document對(duì)象的getElementsByClassName()方法來(lái)根據(jù)標(biāo)簽的class屬性來(lái)獲取
// 因?yàn)閏lass可以獲取到頁(yè)面中多個(gè)對(duì)象,所以后面加上[0],確保僅獲取到第一個(gè)class='box'的元素
var box = document.getElementsByClassName('box')[0];
// console.log(box);
//注意:元素是可以嵌套的,所以我們除了可以在document對(duì)象上調(diào)用這些方法外,還可以在元素上調(diào)用
//剛才已經(jīng)獲取到了box對(duì)象,現(xiàn)在我們直接以box為父級(jí)對(duì)象,再次調(diào)用getElementsByTagName()
//該方法是根據(jù)標(biāo)簽名來(lái)獲取元素,因?yàn)轫?yè)面中可以多個(gè)同名標(biāo)簽,所以返回的也是一個(gè)數(shù)組,要加[0]指定元素
var ul =document.getElementsByTagName('ul')[0];
// console.log(ul);
//這行代碼的原理也上面是一樣的
var tab = ul.getElementsByTagName('li');
// console.log(tab);
//獲取到頁(yè)面全部的信息列表,當(dāng)然返回的也是一個(gè)數(shù)組嘍
var list = box.getElementsByTagName('div');
// console.log(list);
// alert(tab.length) //選項(xiàng)卡的數(shù)量
//給每一個(gè)選項(xiàng)卡添加事件,因?yàn)橛兴膫€(gè)選項(xiàng)卡,所以要用到循環(huán)
//用循環(huán)添加檢測(cè)用戶的鼠標(biāo)點(diǎn)擊
for (var i = 0; i< tab.length; i++) {
//這一步非常關(guān)鍵:為當(dāng)前的選項(xiàng)卡添加自定義屬性index
//思考: 為什么不直接添加到li標(biāo)簽中,而寫在js代碼中?
//解答:因?yàn)閔tml頁(yè)面渲染的時(shí)候,有可能過(guò)濾掉用戶自定義屬性,所以我們要用js動(dòng)態(tài)添加
//tab[i]: 加上序號(hào)才可以找到對(duì)應(yīng)的選項(xiàng)卡,添加自定義屬性,相當(dāng)于對(duì)對(duì)象添加屬性,所以使用點(diǎn)語(yǔ)法
//這里的i,就是當(dāng)前用戶正的點(diǎn)擊的選項(xiàng)卡的索引,其實(shí)就是當(dāng)前對(duì)象的編號(hào)
//思考:為什么我們獲取當(dāng)前用戶點(diǎn)擊的選項(xiàng)卡的序號(hào)呢?
//答: 因?yàn)檫x項(xiàng)卡必須要和下面的信息列表list一一對(duì)應(yīng),所以必須要知道當(dāng)前用戶點(diǎn)擊的是哪個(gè)?
tab[i].index = i;//i變量等于自定義排序號(hào)，用來(lái)確認(rèn)用戶點(diǎn)擊標(biāo)簽后該顯示那個(gè)列表
//這段循環(huán)是用來(lái)清空當(dāng)前用戶的所有操作
//思考:為什么要這樣？
//因?yàn)楫?dāng)前僅允許一個(gè)選項(xiàng)卡高亮顯示,其它的不能顯示
//并且對(duì)應(yīng)的信息列表也僅允許顯示一個(gè)
//所以必須在每一次操作之前,必須將前一次的行為全部清空初始化:
//添加點(diǎn)擊事件
tab[i].addEventListener('click',getData, false);
}
//添加點(diǎn)擊函數(shù)
function getData() {
//清空標(biāo)簽的樣式并將當(dāng)前對(duì)列表隱藏
for (i = 0; i<tab.length; i++) {
//將除了當(dāng)前列表卡外的列表全部清空
tab[i].className = '';
//將除了當(dāng)前列表卡外的列表全部隱藏
list[i].style.display = 'none';
}
//為每個(gè)被點(diǎn)擊的標(biāo)簽顯示樣式一樣為高亮
this.classList.add('active');
//將對(duì)應(yīng)的信息列表顯示出來(lái):直接修改其display屬性為block即可
//為什么這里要在屬性display之前添加style?
//因?yàn)閟tyle屬性在html標(biāo)簽中,是一個(gè)復(fù)合屬性,它的值是一系列用分號(hào)隔開的字符串
//也就是style是一個(gè)對(duì)象,所以要加點(diǎn)語(yǔ)法才可以對(duì)內(nèi)部的子屬性進(jìn)行訪問(wèn)或設(shè)置
list[this.index].style.display = 'block';//將列表顯示出來(lái)
// 用ajax方式獲取與當(dāng)前頁(yè)面對(duì)應(yīng)的數(shù)據(jù)
//創(chuàng)建一個(gè)臨時(shí)變量
var n = this.index;
//ajax請(qǐng)求
var request = new XMLHttpRequest();
//監(jiān)聽函數(shù)
request.onreadystatechange = function (ev) {
if (request.readyState === 4) {
list[n].innerHTML = request.responseText;
}
};
// 獲取
request.open('get', 'data.php?p=' + n, true)
// 發(fā)送
request.send(null);
}
//模擬機(jī)器人點(diǎn)擊操作，獲取默認(rèn)頁(yè)數(shù)據(jù)，這里假定默認(rèn)頁(yè)為第一頁(yè)
//假定一個(gè)是默認(rèn)的標(biāo)簽頁(yè)
var defaultTab = ul.firstElementChild;//獲取第一個(gè)標(biāo)簽頁(yè)
//添加點(diǎn)擊事件
defaultTab.addEventListener('click', show ,false);
//實(shí)例化一個(gè)事件
var event = new Event('click');
// 將事件click分配/派發(fā)給指定的元素, 注意, 這里不需要用戶參與,會(huì)自動(dòng)執(zhí)行, 相當(dāng)于用戶選擇了首頁(yè)
defaultTab.dispatchEvent(event);
//創(chuàng)建show事件函數(shù)
function show() {
// 復(fù)寫ajax
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>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
最終顯示效果：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)