使用Ajax與後臺接口Api交互(以登錄功能爲例)

首先，要作這個功能前，咱們必須先查閱後臺接口文檔，瞭解使用登陸接口時，須要提交哪些參數，而且接口使用返回的數據。
這裏我使用了一個返回json格式數據的登陸接口爲例，講解怎麼使用Ajax與後臺接口交互。

 

開發文檔

由上圖開發文檔裏，咱們能夠清楚的知道，要使用這個登陸接口，咱們只須要提交帳號adminName和密碼pwd兩個參數。

2、編寫javascript(Ajax)實現登陸

var xmlhttp; if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //上面的http請求對象的生成作了一個瀏覽器兼容性處理 var adminName = document.getElementById('adminName').value;//獲取html表單中adminName輸入域對象的值，既帳號 var psw = document.getElementById('psw').value;//獲取html表單中pwd輸入域對象的值，既密碼 xmlhttp.onreadystatechange=function(){ //當接受到響應時回調該方法 if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0)) { var tip = document.getElementById('tip');//獲取html的tip節點，主要用於輸出登陸結果 var text = xmlhttp.responseText;//使用接口返回內容，響應內容 var resultJson = eval("("+text+")");//把響應內容對象轉成javascript對象 var result = resultJson.result;//獲取json中的result鍵對應的值 var code = resultJson.code;//獲取json中的code鍵對應的值 if (result=="fail") {//登陸失敗 if(code==101){ tip.innerHTML = "密碼錯誤!" }else if(code==102){ tip.innerHTML = "用戶不存在!" } }else //登陸成功 if(result=="success"&&code==100){ window.location.href="center.html";//跳轉到centent.html頁面 } } } xmlhttp.open("POST","control1/login",true);//以POST方式請求該接口 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type xmlhttp.send("adminName="+adminName+"&psw="+psw);//發送請求參數間用&分割 

上面的代碼中主要實現請求後臺登陸接口，若登陸成功就跳轉到用戶中心，若登陸失敗，根據返回的code提示用戶登陸失敗的緣由。

做者：xuanyonghao 連接：https://www.jianshu.com/p/dd5b136aed73 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。相濟斷開傅