前后台分离h5和后台数据接口怎么交互数据的

Posted 2023-04-20

参考技术A 1.利用cookie对象
Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。
（1）后台代码
Cookie cookie=new Cookie("name", "hello");
response.addCookie(cookie);
（2）前台代码
Cookie[] cookies=request.getCookies();
for(int i=0;i<cookies.length;i++)
if(cookies[i].getName().toString().equals("name"))
out.print(cookies[i].getValue());



2.利用session对象
session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页，服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时，仍处于同一个session中。
（1）后台代码
request.getSession().setAttribute("name", name);
request.getSession().setMaxInactiveInterval(2);
response.sendRedirect("welcome.jsp");
（2）前台代码（jsp页面）
Object user=request.getSession().getAttribute("name");
3.利用request重定向，设置setAttribute
（1）后台代码
request.setAttribute("name", "cute");
request.getRequestDispatcher("welcome.jsp").forward(request, response); //网址不会改变
PS:如果后台使用的转发代码为 response.sendRedirect("welcome.jsp"); //网址变为welcome.jsp
则request设置的参数无效，因为已经切换到另一个请求了，request参数的有效期为本次请求。
（2）前台代码
String name=request.getAttribute("name").toString();

4.利用Ajax进行异步数据请求（得到的数据可以以json或xml格式返回，便于处理）
(1)后台代码案例（运用servlet传输数据）
public class TestServlet extends HttpServlet

/**
* Constructor of the object.
*/
public TestServlet()
super();


public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
doPost(request, response);


public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

response.setContentType("text/html");
PrintWriter out = response.getWriter();
String data="[\"name\":\"apple\",\"price\":23,\"name\":\"banana\",\"price\":12,\"name\":\"orange\",\"price\":8]";
out.write(data);
out.flush();
out.close();


/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException
// Put your code here




2.前台js请求处理数据代码
function createXMLHttpRequest()
var xmlrequest;
if(window.XMLHttpRequest)
xmlrequest=new XMLHttpRequest();
else if(window.ActiveXObject)
try
xmlrequest=new ActiveXObject("Msxm12.XMLHTTP");
catch(e)
try
xmlrequest=new ActiveXObject("Microsoft.XMLHTTP");
catch(e)
xmlrequest="";



return xmlrequest;

//获取数据的函数
function change()
var xmlrequest=createXMLHttpRequest();
xmlrequest.open("POST","TestServlet",true);
xmlrequest.onreadystatechange=function()
if(xmlrequest.readyState==4&&xmlrequest.status==200)
var data=JSON.parse(xmlrequest.responseText);
var content="<table border=1>";
for(var i=0;i<data.length;i++)
content+="<tr>";
for(o in data[i])
content+="<td>"+data[i][o]+"</td>";

content+="</tr>";

content+="</table>";
document.getElementById("test").innerHTML=content;

;
xmlrequest.send();

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