前端调用后台接口的几种方式
一、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）;//发送请求参数间用&分割
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery