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

2023-09-18 13:32:56

异步需要有一个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");
        }


    }

更多推荐

服务器的维护是如何操作的

服务器的维护是如何操作的服务器可以说是不可或缺的资源，因为现在网络技术发达，我们的生活也都离不开网络的存在，我们想要获取的业务、资料等大多是通过网络进行，所以想要顺应潮流并获得发展，肯定需要服务器来将企业的相关信息与产品等发布到网络中，供客户选择。那应该如何维护好服务器呢？硬件维护1、增加内存和硬盘容量的工作。增加内存

转行车载做开发，首先得掌握好Android Framework~

前言在当今社会，科技的快速发展推动了各行各业的变革。移动设备作为人们生活、工作、学习的重要工具，其市场份额逐年攀升。Android作为全球最受欢迎的移动操作系统之一，为开发者提供了广阔的发展空间。但是现在Android发展比较尴尬，之前想吃它红利的人群太多，加快了行业内卷的部分，致使现在Android人才市场饱，甚至可

压电换能器的工作原理和应用（功率放大器）

在日常生活中，可能会遇到很难测量的物理量，例如施加在金属上的机械应力、温度、压力水平等……对于所有这些应用，需要一种能够以我们熟悉的单位和校准来测量这些未知量的设备，而比较常用的设备是换能器。换能器是一种电气设备，可以将任何类型的物理量以成比例的电量形式转换为电压或电流。按照使用材电磁特性来划分，换能器主要有磁致伸缩和

得帆云“智改数转，非同帆响”-AIGC+低代码PaaS平台系列白皮书，正式发布！

5月16日下午，由上海得帆信息技术有限公司编写，上海市工业互联网协会指导的以“智改数转，非同帆响”为主题的《得帆云AIGC+低代码PaaS平台系列白皮书》正式在徐汇西岸国际人工智能中心发布。本次发布会受到了上海市徐汇区政府、各大媒体和业内专家的广泛关注。上海市工业互联网协会副秘书长王云、上海市徐汇区科委主任张宁、上海市

Spark【Spark SQL（四）UDF函数和UDAF函数】

UDF函数UDF是我们用户可以自定义的函数，我们通过SparkSession对象来调用udf的register（name：String，func（A1,A2,A3...））方法来注册一个我们自定义的函数。其中，name是我们自定义的函数名称，func是我们自定义的函数，它可以有很多个参数。通过UDF函数，我们可以针对某

MySQL学习6：索引

来源教学视频来源：黑马程序员MySQL数据库入门到精通，从mysql安装到mysql高级、mysql优化全囊括简介索引（index）是帮助MySQL高效获取数据的数据结构（有序）。在数据之外，数据库系统还维护着满足特点查找算法的数据结构，这些数据结构以某种方式引用（指向）数据，这样就可以在这些数据结构上实现高价查找算法

mysql数据库基础

目录一、数据库基本概念1.数据：2.表：3.数据库:二、数据库管理系统：1、数据库管理系统介绍：2、数据库系统：3、DBMS工作模式：三、数据库分类：1、关系型数据库：2、关系型数据库的存储结构3、关系型数据库的优缺点：4、非关系型数据库4.1非关系型数据库的优点：4.2非关系型数据库的缺点：一、数据库基本概念1.数据

JavaScript-DOM实战案例

一、window定时器1.window定时器方法有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（schedulingacall）”。目前有两种方式可以实现：setTimeout允许我们将函数推迟到一段时间间隔之后再执行。setInterval允许我们重复运行一个函数，从一段时间间隔

如何通过百度SEO优化提升网站排名（掌握基础概念，实现有效优化）

随着互联网的发展，搜索引擎优化（SEO）成为了网站优化中不可或缺的一部分。在中国，百度搜索引擎占据着主导地位，因此掌握百度SEO概念和优化技巧对网站的排名和曝光非常重要。百度SEO排名的6个有效方法：首先是关键词研究。通过深入了解目标用户的搜索习惯和需求，选择合适的关键词并进行优化；其次是页面优化，蘑菇号https:/

初步了解华为的MTL（市场到线索）流程的基本概念和来龙去脉

前两天，有读者给华研荟发私信，说在学习华为资料的时候看到华为有一个MTL流程，想了解下这个MTL流程和LTC流程有什么区别？既然有了LTC流程，为什么还要MTL流程呢？为此，今天华研荟给大家简要介绍华为的MTL流程，也是非常重要的一个业务流程。如华研荟前面的文章中所提到的，华为认为一个企业运作的主业务主流程就三个：IP

3-D HANet：一种用于目标检测的柔性三维 HeatMap 辅助网络

论文背景室外场景感知使用Lidar：1.点云数据不受天气(雾、风暴、雨和雪)的影响，支持稳定的环境感知；2.点云数据在很大程度上保留了原来中物体的空间结构特征。3D目标检测是室外场景感知的重要组成部分。从一个不完整的点云空间结构中学习目标的完整尺寸和准确定位是三维目标检测的关键。空间结构不完整：受传感器、遮挡、物体材质

热文推荐
  1. QT 调用USB免驱摄像头

    文章目录前言一、界面布局二、QImageEncoderSettings类三、图像的显示总结前言本篇文章来讲解一下如何使用QT调用摄像头，这里我使用的是USB免驱动摄像头，使用不需要按照驱动QT就可以调用到摄像头。一、界面布局这里使用QT设计师进行界面的布局：二、QImageEncoderSettings类QImageE

  2. 【Linux网络编程】Socket-TCP实例

    该代码利用socket套接字建立Tcp连接，包含服务器和客户端。当服务器和客户端启动时需要把端口号或ip地址以命令行参数的形式传入。服务器启动如果接受到客户端发来的请求连接，accept函数会返回一个打开的socket文件描述符，区别于监听连接的listensock，它用来为客户端提供服务的。因为有线程池的存在，可以立

  3. Linux设备驱动模型之platform设备

    Linux设备驱动模型之platform设备上一章节介绍了Linux字符设备驱动，它是比较基础的，让大家理解Linux内核的设备驱动是如何注册、使用的。但在工作中，个人认为完全手写一个字符设备驱动的机会比较少，更多的都是基于前人的代码修修补补过三年。在内核驱动中，你会看到比较多的platform相关的字样，他们具体是什

  4. 涨知识，关于代码签名证书10大常见问题解答

    在当今互联网+时代，各种软件程序充斥着这个网络世界，大大小小的软件层出不穷，如何让用户信任软件并下载软件，是众多软件开发公司需要解决的问题，由此代码签名证书应运而生，提供了软件程序的身份认证、完整性和可信任性的解决方案。那么什么是代码签名证书？代码签名证书的原理是什么？锐成小编收集整理了关于代码签名证书10大常见问题解

  5. PostgreSQL的主从复制方式

    主从复制方式PostgreSQL支持多种主从复制（Master-SlaveReplication）方式，用于创建可靠的数据备份和故障容错解决方案。以下是几种常见的主从复制方式：同步复制（SynchronousReplication）：在同步复制中，主节点将事务发送到一个或多个从节点，并等待从节点确认写操作已成功应用。只

  6. AIGC驱动产品开发创新，改变你所知的一切！

    你是否想过，3000年后的饮料是什么味道？9月12日，可口可乐全球创意平台“乐创无界”再度推出全新限定产品——首款联合人工智能（AI）打造的无糖可口可乐“未来3000年”。从口味研发到包装设计都体现了AI的深度参与打造。Y3000与AI共创这一举措，也呼应了平台以潮流创新的产品与沉浸式体验链接年轻消费者的理念，赋予可口

  7. 多因素身份验证MFA功能

    随着信息技术的不断进步，网络威胁也随之不断升级和演化。为了保护敏感数据和网络资源，企业和组织需要采取更多的安全措施强化信息安全。多因素身份验证（MFA）已经成为了现代安全战略的核心组成部分之一。在这篇文章中，我们将深入探讨ADSelfServicePlus产品内置的多因素身份验证（MFA）功能，以及如何利用ADSelf

  8. Jmeter对图片验证码的处理

    ​jmeter对图片验证码的处理在web端的登录接口经常会有图片验证码的输入，而且每次登录时图片验证码都是随机的；当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段，然后再登录接口中使用；通过jmeter对图片验证码的识别方法1、通过ocrserver工具识别图片验证码；如下图：解压后双击OcrSe

  9. 自动直播软件开发方案：打造智能化、高效化的直播体验

    一、引言随着社交媒体和互联网的快速发展，直播已经成为了人们互动和传播的重要方式。然而，传统直播存在着人力成本高、内容质量不稳定等问题，因此，开发一款自动直软件成为了解决这些问题的关键。二、市场需求分析1.直播行业的快速增长：直播行业在近年来呈现出爆发式增长的趋势，用户对高质量、多样化的直播内容的需求日益增长。2.直播内