AJAX簡(jiǎn)單實(shí)現(xiàn)登錄效果

在日常生活中，我們使用的app或者網(wǎng)站，都需要登陸賬戶才能進(jìn)行下一步操作，例如華為云的登陸界面：

那么，如何簡(jiǎn)單實(shí)現(xiàn)登陸頁(yè)面的一個(gè)效果呢？之前學(xué)習(xí)過(guò)html5的form表單可以實(shí)現(xiàn)這一簡(jiǎn)單樣式，今天我們用AJAX來(lái)實(shí)現(xiàn)一下簡(jiǎn)單的用戶登陸頁(yè)面，輸入帳號(hào)和密碼后，通過(guò)AJAX提交到服務(wù)端接口進(jìn)行處理，由服務(wù)器端判斷并返回登陸結(jié)果，用戶登陸頁(yè)面將服務(wù)器返回結(jié)果彈出。話不多說(shuō)，走起！

環(huán)境

我用的Windows系統(tǒng)

node.js? ?v12.18.3

npm? ? ? 6.14.6

koa2 框架

初始化node.js環(huán)境

cd d:\koa2 koa2 login //創(chuàng)建login的配置文件 cd login && cnpm install npm start

顯示這個(gè)就說(shuō)明啟動(dòng)成功了

然后打開瀏覽器 輸入http://localhost:3000/? 測(cè)試一下效果

用戶登陸首頁(yè)

頁(yè)面路徑：?views/index.pug

block content h1 登陸華為帳號(hào) div 華為帳號(hào)： input(type='text' id='account') div 帳號(hào)密碼： input(type='password' id='pwd') button(type='button' id='btn') 登陸

向服務(wù)器提交數(shù)據(jù)

頁(yè)面路徑：?public/javascripts/login.js

var btn = document.getElementById("btn"); var account = ''; var pwd = ''; btn.onclick = function(){ account = document.getElementById("account").value; pwd = document.getElementById('pwd').value; ajax({ type: 'post', url: '/login', data:{ account: account, pwd: pwd }, success: function(data){ alert(data) } }) function ajax(opt){ var defaultParam = { type: 'get', url: '#', data: {}, async: true, success: function(){} } for(var key in opt){ defaultParam[key] = opt[key]; } var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } var paramStr = ""; for(var k in defaultParam.data){ paramStr += k + '=' + defaultParam.data[k] + '&'; } paramStr = paramStr.substr(0,paramStr.length - 1); console.log(paramStr); if(defaultParam.type == 'get'){ xhr.open(defaultParam.type,defaultParam.url + '?' + paramStr,defaultParam.async); xhr.send() }else{ xhr.open(defaultParam.type,defaultParam.url,defaultParam.async); // post請(qǐng)求 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send(paramStr) } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ defaultParam.success(xhr.responseText); } } } } }

載入login.js文件

login.js?處理登陸提交及ajax請(qǐng)求發(fā)送

頁(yè)面路徑：?views/layout.pug

block content

接口配置

在login.js中ajax()方法中url對(duì)應(yīng)的接口在這個(gè)文件配置

頁(yè)面路徑：app.js

app.use(async function (ctx){ if(ctx.path == "/login"){ if(ctx.request.body.account == 'yunqinanhai' && ctx.request.body.pwd == '123456'){ ctx.body = '登陸成功 ！' }else{ ctx.body = '登陸失敗 ！' } } }) module.exports = app

測(cè)試效果

google瀏覽器訪問(wèn)?localhost:3000

賬號(hào)和密碼必須都匹配正確,返回?"登陸成功?!"

否則?返回?"登陸失敗"

測(cè)試帳號(hào)：yunqinnahai? 密碼：123456? ?（app.js可以修改你要測(cè)試的賬號(hào)密碼）

密碼不正確，就返回失敗。

結(jié)語(yǔ)

這個(gè)實(shí)戰(zhàn)給我最大的啟示就是文檔是一個(gè)好東西，鍛煉看文檔的能力會(huì)自己接受新東西的速度變快。同時(shí)遇到代碼錯(cuò)誤是，需要冷靜，不要急躁，靜下來(lái)心來(lái)處理問(wèn)題，有些看似簡(jiǎn)單的細(xì)節(jié)忽略了，項(xiàng)目同樣跑不起來(lái)。好啦，這個(gè)AJAX登錄頁(yè)面搭建到這里也結(jié)束了，咱們下次再會(huì)。

Ajax

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。