前端初學者一看就懂:Ajax呼叫後臺介面案例
阿新 • • 發佈:2018-12-10
一直以來很多初學者對於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);//傳送請求引數間用&分割