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

Posted aivnfjgj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Ajax与后台接口Api交互(以登陆功能为例)相关的知识,希望对你有一定的参考价值。

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

 
技术分享图片
开发文档

由上图开发文档里,我们可以清楚的知道,要使用这个登录接口,我们只需要提交账号adminName和密码pwd两个参数。

二、编写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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。相济断开傅






以上是关于使用Ajax与后台接口Api交互(以登陆功能为例)的主要内容,如果未能解决你的问题,请参考以下文章

MUI框架-09-MUI 与后台数据交互

Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)

Vue中使用Ajax与后台交互

content-type常见类型辨析(以ajax与springmvc前后端交互为例)

后端与前端交互Ajax接口

如何重构出这么优雅后台 API 接口