一、查閱開(kāi)發(fā)文檔
首先输吏，要做這個(gè)功能前，我們必須先查閱后臺(tái)接口文檔替蛉，了解使用登錄接口時(shí)贯溅，需要提交哪些參數(shù)，并且接口使用返回的數(shù)據(jù)躲查。
這里我使用了一個(gè)返回json格式數(shù)據(jù)的登錄接口為例它浅，講解怎么使用Ajax與后臺(tái)接口交互。
開(kāi)發(fā)文檔
由上圖開(kāi)發(fā)文檔里镣煮，我們可以清楚的知道姐霍，要使用這個(gè)登錄接口，我們只需要提交賬號(hào)adminName和密碼pwd兩個(gè)參數(shù)。
二镊折、編寫(xiě)javascript(Ajax)實(shí)現(xiàn)登錄
var xmlhttp;
if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//上面的http請(qǐng)求對(duì)象的生成做了一個(gè)瀏覽器兼容性處理
var adminName = document.getElementById('adminName').value;//獲取html表單中adminName輸入域?qū)ο蟮闹悼韪荣~號(hào)
var psw = document.getElementById('psw').value;//獲取html表單中pwd輸入域?qū)ο蟮闹担让艽a
xmlhttp.onreadystatechange=function(){
//當(dāng)接受到響應(yīng)時(shí)回調(diào)該方法
if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
{
var tip = document.getElementById('tip');//獲取html的tip節(jié)點(diǎn)恨胚，主要用于輸出登錄結(jié)果
var text = xmlhttp.responseText;//使用接口返回內(nèi)容骂因，響應(yīng)內(nèi)容
var resultJson = eval("("+text+")");//把響應(yīng)內(nèi)容對(duì)象轉(zhuǎn)成javascript對(duì)象
var result = resultJson.result;//獲取json中的result鍵對(duì)應(yīng)的值
var code = resultJson.code;//獲取json中的code鍵對(duì)應(yīng)的值
if (result=="fail") {//登錄失敗
if(code==101){
tip.innerHTML = "密碼錯(cuò)誤!"
}else if(code==102){
tip.innerHTML = "用戶(hù)不存在!"
}
}else //登錄成功 if(result=="success"&&code==100){
window.location.href="center.html";//跳轉(zhuǎn)到centent.html頁(yè)面
}
}
}
xmlhttp.open("POST","control1/login",true);//以POST方式請(qǐng)求該接口
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type
xmlhttp.send("adminName="+adminName+"&psw="+psw);//發(fā)送請(qǐng)求參數(shù)間用&分割
上面的代碼中主要實(shí)現(xiàn)請(qǐng)求后臺(tái)登錄接口，若登錄成功就跳轉(zhuǎn)到用戶(hù)中心赃泡，若登錄失敗寒波，根據(jù)返回的code提示用戶(hù)登錄失敗的原因。
