前端调⽤后台接⼝的⼏种⽅式
前端调⽤后台接⼝的⼏种⽅式
⼀、Ajax⽅式
⾸先，要做这个功能前，我们必须先查阅后台接⼝⽂档，了解使⽤登录接⼝时，需要提交哪些参数，并且接⼝使⽤返回的数据。
这⾥我使⽤了⼀个返回json格式数据的登录接⼝为例，讲解怎么使⽤Ajax与后台接⼝交互。
输⼊参数：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 = ElementById('adminName').value;//获取html表单中adminName输⼊域对象的值，既账号
var psw = ElementById('psw').value;//获取html表单中pwd输⼊域对象的值，既密码
//当接受到响应时回调该⽅法
if (adyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
{
var tip = ElementById('tip');//获取html的tip节点，主要⽤于输出登录结果
var text = sponseText;//使⽤接⼝返回内容，响应内容
var resultJson = eval("("+text+")");//把响应内容对象转成javascript对象
var result = sult;//获取json中的result键对应的值
var code = de;//获取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);//发送请求参数间⽤&分割
接口文档怎么看
1
2
3
4
5
上⾯的代码中主要实现请求后台登录接⼝，若登录成功就跳转到⽤户中⼼，若登录失败，根据返回的code提⽰⽤户登录失败的原因。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。