前后端连接-界面跳转，异步

lcatake

已于 2023-09-18 14:05:56 修改

阅读量486

点赞数

文章标签：笔记

于 2023-09-18 13:32:56 首次发布

本文链接：https://blog.csdn.net/lcatake/article/details/132389833

版权

异步需要有一个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
--%>
<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 {
        //     局部刷新 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<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.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<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");
        }


    }

lcatake

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端连接-界面跳转，异步

/接收前端的数据 request.getParameter("name") name 是在loginAjax拼接url，参数列表中的name。//接收前端的数据 request.getParameter("name") name 是在loginAjax拼接url，参数列表中的name。//通过时间戳，欺骗浏览器，发送新的请求,// 400 错误的请求。// xmlhttp.status 请求状态：200 结果请求成功。
复制链接

扫一扫