html中使用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);//发送请求参数间用&分割
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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