前端调用后台接口的几种方式

 

　　一、Ajax方式

 

　　首先，要做这个功能前，我们必须先查阅后台接口文档，了解使用登录接口时，需要提交哪些参数，并且接口使用返回的数据。

 

　　这里我使用了一个返回json格式数据的登录接口为例，讲解怎么使用Ajax与后台接口交互。

 

　　用户登录接口URL： , ?Method： POST

 

　　输入参数：username=admin

 

　　password=123456

 

　　输出：登录成功：

 

　　登录成功：

 

　　登录成功：

 

　　编写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="";//跳转到centent.html页面

 

　　}

 

　　}

 

　　}

 

　　xmlhttp.open（"POST","control1/login",true）;//以POST方式请求该接口

 

　　xmlhttp.setRequestHeader（"Content-type","application/x-"）;//添加Content-type

 

　　xmlhttp.send（"adminName="+adminName+"&psw="+psw）;//发送请求参数间用&分割