前端调用后台接口

最新推荐文章于 2025-06-08 18:59:03 发布

持酒劝斜阳丶

最新推荐文章于 2025-06-08 18:59:03 发布

阅读量2.1w

点赞数 5

分类专栏： Html 文章标签： html、接口

Html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Ajax技术实现用户登录功能，包括与后端接口的交互过程及响应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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