异步需要有一个js中转
前后端数据互通流程: 建立jsp文件,连接js文件,在js文件中设置传入后端的值与使用方法(get,post),后端执行完代码后 将值返回给js,js接收后返回给jsp;
界面跳转流程:表单被提交后,根据设置传入后端的值与使用方法(get,post)在对应的servlet中调用对应的方法,并 进行逻辑判断和设置跳转业面的属性的初始值,后跳转新的界面
1.jsp文件 与html 写法一样
Created by IntelliJ IDEA.User: 21647Date: 2023/9/14Time: 10:05To change this template use File | Settings | File Templates. --%><%@ page contentType="text/html;charset=UTF-8" language="java" %> <%-- jsp业面分为两个部分:模块数据,元素 模块数据:jsp业面里的HTML代码,内容是固定的 元素:jsp里面的java部分 jsp:java+html --%> <html> <head><title>Title</title> </head> <body> <h1>登录页面</h1> <%-- action 地址--%> <%--method 提交方式:默认 get: 执行哪个方法--%> <form action="../ServletUserLogin" method="post"> <div><label >username:</label> <%-- name一定要写,否则报错 ServletUserLogin 只有加了name属性的标签元素才会提交到服务器--%><input type="text" name="username" id="username"> <%-- 返回用户名是否存在--%><span id="usernameGet"></span></div><div><label >password</label><input type="password" name="password" id="password"><span id="passwordGet"></span></div><br><input type="submit" value="提交"></form></body> <%-- 链接js--%> <script src="../ajax/loginAjax.js"></script> <%--<script src="../ajax/hasYongHu.js"></script>--%> <script src="../ajax/passAjax.js"></script> </html>
2. jsp的js文件 从前端往后端传入值 并将后端返回值返回给前端
//ajax 异步请求对象 var xmlhttp_password;//通过id返回元素节点 function $$(id) {return document.getElementById(id); }//当用户名输入失去焦点 $$('password').οnblur=ajaxGetMethod;function ajaxGetMethod() {console.log("wnm");// 1.创建异步对象// 解决浏览器兼容问题if(window.XMLHttpRequest){xmlhttp_password=new XMLHttpRequest();}else {xmlhttp_password=new ActiveXObject("Microsoft.XMLHTTP");}// 2. url 纯地址 保留?号var url="/ServletLG/ServletLogin_nam_password?" ;//参数列表var param= "name="+ $$('username').value+'&password='+$$('password').value+'&time='+new Date().getTime() ; //通过时间戳,欺骗浏览器,发送新的请求,// 2.解决乱码// post 给 参数列表解决param=encodeURI(param,'utf-8');// console.log(url);// 3.设置回调函数xmlhttp_password.onreadystatechange =callbackGet_password;// 4.设置请求类型 // true 异步请求:局部刷新xmlhttp_password.open("post",url,true); // 设置请求头信息xmlhttp_password.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 5.将请求发送到服务器 send 传参数xmlhttp_password.send(param); // }function callbackGet_password(){ // 处理返回后的数据是否成功 后端到前端 // 1.状态码if(xmlhttp_password.status == 200 && xmlhttp_password.readyState==4){//获得返回的值var info=xmlhttp_password.responseText;$$('passwordGet').innerText=info;}// xmlhttp.status 请求状态:200 结果请求成功 // 202 请求接收,但未处理完 // 400 错误的请求 // 404 地址错误 // 500 代码错误 // xmlhttp.readyState 异步请求状态: 0 尚未初期化 // 1 正在加载 // 2 加载完成 // 3 正在处理 // 4处理完成 }
3.servlet 文件 分为 get post文件
get:
@WebServlet(name = "ServletLogin_nam_password" ,value="/ServletLogin_nam_password")public class ServletLogin_nam_password extends HttpServlet {// 局部刷新 agaxprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //接收 前端的数据 request.getParameter("name") name 是在loginAjax拼接url,参数列表中的nameString name=request.getParameter("name");String password=request.getParameter("password"); // 解码name = URLDecoder.decode(name,"utf-8");password = URLDecoder.decode(password,"utf-8");System.out.println(password);// 防止回传数据乱码 在发送数据前写 // response.setContentType("text/html;charset=UTF-8");UserDao ud=new UserDao();// System.out.println(ud.hasName(name)); // 防止回传数据乱码 在发送数据前写response.setContentType("text/html;charset=UTF-8");//向前端发送数据PrintWriter out1=response.getWriter();if(ud.hasYonghu(name,password)){out1.print("密码存在");}else {out1.print("密码不存在");} //}
post:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//接收 前端的数据 request.getParameter("name") name 是在loginAjax拼接url,参数列表中的nameString name=request.getParameter("name");String password=request.getParameter("password"); // 解码name = URLDecoder.decode(name,"utf-8");password = URLDecoder.decode(password,"utf-8");System.out.println(password);// 防止回传数据乱码 在发送数据前写 // response.setContentType("text/html;charset=UTF-8");UserDao ud=new UserDao();// System.out.println(ud.hasName(name)); // 防止回传数据乱码 在发送数据前写response.setContentType("text/html;charset=UTF-8");//向前端发送数据PrintWriter out1=response.getWriter();if(ud.hasYonghu(name,password)){out1.print("密码存在");}else {out1.print("密码不存在");} //}
4.当表单被提交后 执行../ServletUserLogin 的servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // post 和 get 的区别: // 1。get请求地址栏携带了参数,post请求只有地址没有参数 // 2.get请求参数暴露 不安全,post请求参数隐藏 安全 // 3.get请求携带的最大数据(8k)不如post请求String username=request.getParameter("username");String password=request.getParameter("password");username = URLDecoder.decode(username,"utf-8");password = URLDecoder.decode(password,"utf-8");System.out.println(username+"aaa"+password);System.out.println("Post");UserDao ud=new UserDao();StockDao sd=new StockDao();List<Stock> ls2=sd.getFenYe(3,1);System.out.println(ls2);request.getSession().setAttribute("stocklist",ls2);if(ud.hasYonghu(username,password)){ // 成功 // 请求转发:一次请求 ,地址栏不变// http://localhost:8080/ServletLG/ServletUserLogin// 跳转之前 将数据库 stock 仓库 数据放入list中request.getRequestDispatcher("/jsp/denglutrue.jsp").forward(request,response);}else { //失败 // 重定向 :两次请求 前端-》servlet, 地址栏变化 // http://localhost:8080/ServletLG/jsp/denglufalse.jspresponse.sendRedirect("/ServletLG/jsp/denglufalse.jsp");}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 从name 属性获取String username=request.getParameter("username");String password=request.getParameter("password");System.out.println("text");username = URLDecoder.decode(username,"utf-8");password = URLDecoder.decode(password,"utf-8");UserDao ud=new UserDao();if(ud.hasYonghu(username,password)){ // 成功 // 请求转发:一次请求 ,地址栏不变 //http://localhost:8080/ServletLG/ServletUserLogin?username=aa&password=aa123StockDao sd=new StockDao();List<Stock> ls2=sd.getFenYe(3,1);System.out.println(ls2);request.getSession().setAttribute("stocklist",ls2);request.getRequestDispatcher("/jsp/denglutrue.jsp").forward(request,response);}else { //失败 // 重定向 :两次请求 前端-》servlet, 重后端往前端 地址栏变化response.sendRedirect("/ServletLG/jsp/denglufalse.jsp");}}