使用Ajax与后台接口Api交互(以登录功能为例)

首先，要作这个功能前，咱们必须先查阅后台接口文档，了解使用登陆接口时，须要提交哪些参数，而且接口使用返回的数据。
这里我使用了一个返回json格式数据的登陆接口为例，讲解怎么使用Ajax与后台接口交互。

 

开发文档

由上图开发文档里，咱们能够清楚的知道，要使用这个登陆接口，咱们只须要提交帐号adminName和密码pwd两个参数。

2、编写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);//发送请求参数间用&分割 

上面的代码中主要实现请求后台登陆接口，若登陆成功就跳转到用户中心，若登陆失败，根据返回的code提示用户登陆失败的缘由。

做者：xuanyonghao 连接：https://www.jianshu.com/p/dd5b136aed73 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。相济断开傅