使用Ajax與後台介面Api互動(以登陸功能為例)

標籤：encode   login   keyword   發送請求   control   產生   idt   head   pack   

首先，要做這個功能前，我們必須先查閱後台介面文檔，瞭解使用登入介面時，需要提交哪些參數，並且介面使用返回的資料。
這裡我使用了一個返回json格式資料的登入介面為例，講解怎麼使用Ajax與後台介面互動。

 開發文檔

由開發文檔裡，我們可以清楚的知道，要使用這個登入介面，我們只需要提交帳號adminName和密碼pwd兩個參數。

二、編寫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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。相濟斷開傅

使用Ajax與後台介面Api互動(以登陸功能為例)