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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/86479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python_ithheima_第二阶段

第一章 01-初识对像 02 类的成员方法 03 类和对象 04 构造方法 05 魔术方法 06 封装 07 封装的课后练习题讲解 08 继承的基础语法 pass关键字的功能是“语法补全” 同名成员或方法&#xff0c;谁先来谁优先级高 09 复写父类成员和调用父类成员 10 变量的类型注解 11 函数和方法…

ubuntu | 安装nvidia驱动

ubuntu | 安装nvidia驱动 禁用系统自带显卡驱动nouveau提前安装软件环境安装nvidia显卡驱动 禁用系统自带显卡驱动nouveau 首先查看系统自带显卡驱动nouveau是否已经启用 如果启用则需要先禁用才能安装nvidia的驱动 未启用则直接安装 查看是否启用显卡驱动nouveau ## 如果没有…

Qt---day4---9.20

qt完成时钟&#xff1a; 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QtDebug> #include <QPainter> #include <QTimerEvent> #include <QTime>QT_BEGIN_NAMESPACE names…

GPT研究

1. 分词 2. embedding 在大型语言模型&#xff08;如GPT-3&#xff09;中&#xff0c;“embedding”&#xff08;嵌入&#xff09;通常指的是词嵌入&#xff08;Word Embeddings&#xff09;或位置嵌入&#xff08;Position Embeddings&#xff09;。这些嵌入在模型内部用于表…

ROS2 的行为树 — 第 1 部分:解锁高级机器人决策和控制

一、说明 在复杂而迷人的机器人世界中&#xff0c;行为树&#xff08;BT&#xff09;已成为决策过程中不可或缺的一部分。它们提供了一种结构化、模块化和高效的方法来对机器人的行为进行编程。BT起源于视频游戏行业&#xff0c;用于控制非玩家角色&#xff0c;他们在机器人领域…

Kafka 常见问题

文章目录 kafka 如何确保消息的可靠性传输Kafka 高性能的体现利用Partition实现并行处理利用PageCache 如何提高 Kafka 性能调整内核参数来优化IO性能减少网络开销批处理数据压缩降低网络负载高效的序列化方式 kafka 如何确保消息的可靠性传输 消费端弄丢了数据 唯一可能导致…

MinGW相关错误

1、go编译c报错 cc1.exe: sorry, unimplemented: 64-bit mode not compiled in 参考&#xff1a;BeifangCc go编译c报错 cc1.exe: sorry, unimplemented: 64-bit mode not compiled in 说明当前gcc是32位&#xff0c;无法在当前64位机器上正常工作&#xff0c;需要更新gcc 下载…

指针和数组笔试题的透析

指针---进阶篇&#xff08;三&#xff09; 一、前言二、一维数组例题透析&#xff1a;三、指针笔试题1.例一&#xff1a;2.例二&#xff1a;3.例三&#xff1a;4.例四&#xff1a;5.例五&#xff1a;6.例六&#xff1a; 一、前言 那么好了好了&#xff0c;宝子们&#xff0c;从…

R语言绘制PCA双标图、碎石图、变量载荷图和变量贡献图

1、原论文数据双标图 代码&#xff1a; setwd("D:/Desktop/0000/R") #更改路径#导入数据 df <- read.table("Input data.csv", header T, sep ",")# ----------------------------------- #所需的包: packages <- c("ggplot2&quo…

Centos下安装 oracle11g 博客2

[oraclewangmengyuan database]$ ./runInstaller -silent -responseFile /home/oracle/database/response/db_install.rsp -ignorePrereq ./runInstaller -silent -responseFile /home/oracle/database/response/db_install.rsp -ignorePrereq 正在启动 Oracle Universal Insta…

Innodb 原理和日志

一、MySQL结构 客户端 server层 查询缓存&#xff08;5.7&#xff09; 连接器 分析器 优化器 执行器 引擎层 二、一条update操作mysql的流程 三、MySQL的日志 &#xff08;1&#xff09;redo log 保证MySQL 持久性的关键&#xff0c;如果MySQL宕机&#xff0c;buffer pool…

Java编程的精髓:深入理解JVM和性能优化

文章目录 Java虚拟机&#xff08;JVM&#xff09;的核心概念1. 类加载器&#xff08;Class Loader&#xff09;2. 内存区域3. 垃圾回收&#xff08;Garbage Collection&#xff09;4. 类型转换和多态 JVM性能调优1. JVM参数调整2. 内存管理3. 多线程优化4. 使用性能分析工具5. …

【【萌新的FPGA学习之按键控制LED实验】】

按键控制LED实验 在写这篇文章之前我必须对我的错误表示深刻的道歉 因为我之前的文章自己也是边看边学给大家带来了大的困扰 抱歉抱歉 我们这里讲述一下综合和仿真的关系 其实我们更多的是应该关注仿真下得到的波形情况 然后分析 对于综合&#xff0c;综合的最大的目的还是看功…

python+opencv寻找图片或视频中颜色进行追踪之HSV颜色处理

pythonopencv寻找图片或视频中颜色进行追踪之HSV颜色处理 1.颜色空间转换 import cv2img cv2.imread(1.jpg) # 转换为灰度图 img_gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)cv2.imshow(img, img) cv2.imshow(gray, img_gray) cv2.waitKey(0)cv2.cvtColor()用来进行颜色模…

uniapp项目实践总结(十九)版本更新和热更新实现方法

导语:当一个 APP 应用开发完成以后,就要上架应用商店,但有时候修改一些小问题或者推出一些活动,又不想频繁地提交应用商店审核,那么就可以使用应用内更新功能来进行应用的版本升级更新或热更新,下面就介绍一下实现的方法。 目录 准备工作原理分析实战演练案例展示准备工作…

打印大对象日志导致GC问题的解决

内容&#xff1a; rpc调用外部服务时&#xff0c;需要将req和resp的信息打印出来&#xff0c;以便于排查问题。但是有的rpc服务的resp信息过于庞大&#xff0c;比如resp中有List<>信息&#xff0c;list很大很大时会导致log.info打印信息时&#xff0c;产生GC&#xff0c…

国足亚运会4:0战胜缅甸

9月21日晚&#xff0c;中国男足亚运队以4:0战胜小组赛对手缅甸队&#xff0c;谭龙5分钟打入两球&#xff0c;王振澳、戴伟浚各进一球。 这是继9月19日5:1战胜印度队后&#xff0c;中国队取得的第二场胜利。 目前&#xff0c;国足亚运队已提前锁定淘汰赛资格&#xff0c;球队最后…

leetcode:2446. 判断两个事件是否存在冲突(python3解法)

难度&#xff1a;简单 给你两个字符串数组 event1 和 event2 &#xff0c;表示发生在同一天的两个闭区间时间段事件&#xff0c;其中&#xff1a; event1 [startTime1, endTime1] 且event2 [startTime2, endTime2] 事件的时间为有效的 24 小时制且按 HH:MM 格式给出。 当两个…

网站接入公网并配置域名访问【详细教程】

网站接入公网并配置域名访问【详细教程】 安装Nginx上传网页文件配置Nginx腾讯云配置域名映射接入公网备案流程 本教程将以腾讯云服务器和腾讯云域名为例&#xff0c;介绍如何快速将网站接入公网并配置域名访问。我们将使用xshell工具进行操作&#xff0c;并涵盖安装nginx、上传…

Python项目Flask ipv6双栈支持改造

一、背景 Flask 是一个微型的(轻量)使用Python 语言开发的 WSGI Web 框架(一组库和模块),基于Werkzeug WSGI工具箱/库和Jinja2 模板引擎,当然,Python的WEB框架还有:Django、Tornado、Webpy,这暂且不提。 Flask使用BSD授权。 Flask也被称为microframework(微框架),F…