一、Ajax方式
首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据。
这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Ajax与后台接口交互。
用户登录接口URL:http://localhost:8080/user/login.do , Method: POST
输入参数:username=admin
password=123456
输出:登录成功:{"result":"sucess", "code":100}
登录成功:{"result":"fail", "code":101}
登录成功:{"result":"fail", "code":102}
编写javascript(Ajax)调用接口:
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var adminName = document.getElementById('adminName').value;
var psw = document.getElementById('psw').value;
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
{
var tip = document.getElementById('tip');
var text = xmlhttp.responseText;
var resultJson = eval("("+text+")");
var result = resultJson.result;
var code = resultJson.code;
if (result=="fail") {
if(code==101){
tip.innerHTML = "密码错误!"
}else if(code==102){
tip.innerHTML = "用户不存在!"
}
}else
window.location.href="center.html";
}
}
}
xmlhttp.open("POST","control1/login",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
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
上面的代码中主要实现请求后台登录接口,若登录成功就跳转到用户中心,若登录失败,根据返回的code提示用户登录失败的原因。