1. 程式人生 > >前端初學者一看就懂:Ajax呼叫後臺介面案例

前端初學者一看就懂:Ajax呼叫後臺介面案例

一直以來很多初學者對於ajax呼叫後臺介面總是不能很明白,以下這個案例,能很清楚的過程展現給大家:

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

使用者登入介面URL:http://localhost:8080/user/login.do ,  Method: POST

輸入引數:username=admin

password=123456

輸出:登入成功:{"result":"sucess", "code":100}

 登入成功:{"result":"fail", "code":101}  登入成功:{"result":"fail", "code":102}

編寫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);//傳送請求引數間用&分割