文档章节

前后端通信中使用Ajax与后台接口api交互(以登录功能为例)

o
 osc_fmg49rzg
发布于 2019/03/20 11:24
字数 523
阅读 3
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、查阅开发文档

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

  

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

 

二、编写javascript(Ajax)实现登录

 1 var xmlhttp;
 2 if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
 3        xmlhttp=new XMLHttpRequest();
 4 }
 5 else{// IE6, IE5
 6        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 7 }
 8 //上面的http请求对象的生成做了一个浏览器兼容性处理
 9 var adminName = document.getElementById('adminName').value;//获取html表单中adminName输入域对象的值,既账号
10 var psw = document.getElementById('psw').value;//获取html表单中pwd输入域对象的值,既密码          
11 
12 xmlhttp.onreadystatechange=function(){
13 //当接受到响应时回调该方法
14         if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
15         {
16                     var tip = document.getElementById('tip');//获取html的tip节点,主要用于输出登录结果
17                     var text = xmlhttp.responseText;//使用接口返回内容,响应内容
18                     var resultJson = eval("("+text+")");//把响应内容对象转成javascript对象
19                     var result = resultJson.result;//获取json中的result键对应的值
20                     var code = resultJson.code;//获取json中的code键对应的值
21                     if (result=="fail") {//登录失败
22                         if(code==101){
23                             tip.innerHTML = "密码错误!"
24                         }else if(code==102){
25                             tip.innerHTML = "用户不存在!"
26                         }
27                     }else //登录成功        if(result=="success"&&code==100){
28                         window.location.href="center.html";//跳转到centent.html页面
29                     }
30           }
31 } 
32  xmlhttp.open("POST","control1/login",true);//以POST方式请求该接口
33  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加Content-type
34  xmlhttp.send("adminName="+adminName+"&psw="+psw);//发送请求参数间用&分割

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

 

上一篇: 二、进程
下一篇: vue项目创建过程
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
打通Vue开发前后台业务的任督二脉

https://juejin.im/post/5e5e2bcf518825494f7e0127 前言 本文会在宏观视野上,讲述从全栈开发到整栈开发的能力,会展示一个简单的后台开发项目片段,其中采用了element-ui作为后台界面开发框...

osc_fzwhnwxc
03/19
10
0
打通Vue开发前后台业务的任督二脉

https://juejin.im/post/5e5e2bcf518825494f7e0127 前言 本文会在宏观视野上,讲述从全栈开发到整栈开发的能力,会展示一个简单的后台开发项目片段,其中采用了element-ui作为后台界面开发框...

osc_96wcoyea
03/19
7
0
打通Vue开发前后台业务的任督二脉

前言 本文会在宏观视野上,讲述从全栈开发到整栈开发的能力,会展示一个简单的后台开发项目片段,其中采用了element-ui作为后台界面开发框架,会分享前后台通信之间的API设计经验,以及vue3....

Key.L
03/03
0
0
3:前端ajax调用接口方式

前端调用后台接口的几种方式 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/jitianxia68/article/details...

osc_yd2orh02
2019/08/14
2
0
前端初学者一看就懂:Ajax调用后台接口案例(转)

一直以来很多初学者对于ajax调用后台接口总是不能很明白,以下这个案例,能很清楚的过程展现给大家: 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些...

osc_z7893gdn
02/08
10
0

没有更多内容

加载失败,请刷新页面

加载更多

面试必问之mysql基础

mysql存储引擎 如何选择mysql存储引擎 先得了解下各个存储引擎区别 功能 MylSAM MEMORY InnoDB Archive 功能 MylSAM MEMORY InnoDB Archive 存储限制 256TB RAM 64TB None 支持事务 No No Ye...

lipengxs
25分钟前
16
0
错误:将标头发送到客户端后无法设置标头 - Error: Can't set headers after they are sent to the client

问题: I'm fairly new to Node.js and I am having some issues. 我对Node.js相当陌生,遇到了一些问题。 I am using Node.js 4.10 and Express 2.4.3. 我正在使用Node.js 4.10和Express 2......

法国红酒甜
37分钟前
18
0
Spring中事务不生效的几种情况

数据库引擎不支持事务。 没有被Spring管理。 方法不是public的。 自身调用问题。 数据源没有配置事务管理器。 不支持事务。 异常被吃了。 异常类型错误。 事务失效类型: 数据库引擎不支持事...

九分石人
56分钟前
31
0
从Linux内核理解JAVA的NIO

前言 IO 可以简单分为磁盘 IO 和 网络 IO ,磁盘 IO 相对于网络 IO 速度会快一点,本文主要介绍 磁盘 IO ,网络 IO 下周写。 JAVA 对 NIO 抽象为 Channel , Channel 又可以分为 FileChannel ...

万古云霄
今天
22
0
Material Design用在c#的wpf app中

官网:http://materialdesigninxaml.net/ 样式丰富 做网站和手机不粗 个人觉得不适合用在.net framework中,在.net core中应该大有作为。...

齐勇cn
今天
28
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部