异步需要有一个js中转
前后端数据互通流程: 建立jsp文件，连接js文件，在js文件中设置传入后端的值与使用方法（get，post），后端执行完代码后 将值返回给js，js接收后返回给jsp；
界面跳转流程：表单被提交后，根据设置传入后端的值与使用方法（get，post）在对应的servlet中调用对应的方法，并 进行逻辑判断和设置跳转业面的属性的初始值，后跳转新的界面
1.jsp文件 与html 写法一样
Created by IntelliJ IDEA.
User: 21647
Date: 2023/9/14
Time: 10:05
To 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
--%>
Title
登录页面
<%-- action 地址--%>
<%--method 提交方式：默认 get： 执行哪个方法--%>
<%-- 链接js--%>
<%----%>
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 {
// 局部刷新 agax
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收 前端的数据 request.getParameter("name") name 是在loginAjax拼接url，参数列表中的name
String 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，参数列表中的name
String 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 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.jsp
response.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=aa123
StockDao sd=new StockDao();
List 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");
}
}