<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="/day08/js/axios.min.js"></script> </head> <body> 用户名：<input type="text" id="username"><br> 密码：<input type="password" id="password"> <span id="msg"></span> <button id="login">登录</button> <script> //获取元素 let loginBtn = document.querySelector("#login"); let usernameInput =document.querySelector("#username"); //先拿框，.value再获取框里的值,定义在函数外axios拿不到值，需放在函数里 // let username = document.querySelector("#username").value; // let password = document.querySelector("#password").value; //注册点击事件 loginBtn.onclick = function () { let username = usernameInput.value; let password = document.querySelector("#password").value; let msg = document.querySelector("#msg"); axios.get("/day08/login?username="+username+"&password="+password) //成功之和响应的值放在response中，自动调用函数 .then(response=>{ // 成功之后要执行的内容，js对象 msg.innerText =response.data; },error=>{ //因为网络等原因，传输失败执行这里的代码(404等不属于) }) } //当用户名在用户名失去焦点时，获取用户名 usernameInput.onblur = function () { let username =usernameInput.value; let msg = document.querySelector("#msg"); //独立功能，判断用户名是否重复 axios.get("/day08/usernameCheck?username="+username) .then(response=>{ console.log(response.data); if(response.data==200){ //通过js控制样式（颜色等） msg.style.color ="green"; msg.innerText ="可以正常注册"; }else{ msg.style.color ="red"; msg.innerText ="用户名太受欢迎，请重新输入"; } }) } </script> </body> </html>

时间: 2024-04-26 17:20:36 浏览: 11
这段代码是一个基本的前端登录页面，其中包括输入用户名和密码的输入框以及登录按钮。在点击登录按钮时，页面会向后端发送用户名和密码，如果验证成功，则会在页面上显示登录成功的信息，否则会显示登录失败的信息。 另外，代码中还包括一个用户名输入框的失去焦点事件，当用户输入完用户名并离开输入框时，页面会向后端发送用户名，后端会返回一个状态码，根据状态码来判断用户名是否可用，并在页面上显示相应的提示信息。 需要注意的是，这段代码中使用了Axios库来进行网络请求，所以需要在页面中引入Axios库的js文件。
相关问题

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta charset="UTF-8"> <title>首页</title> <style type="text/css"> body { background:#17334e; ; } 如何添加背景图

要在JSP文件中添加背景图，你可以使用CSS的background-image属性来实现。在你的JSP文件中，你可以在<style>标签中添加以下代码来设置背景图： body { background-image: url("path/to/your/image.jpg"); } 其中，"path/to/your/image.jpg"是你要使用的背景图的文件路径。你可以将图片文件放在与你的JSP文件相同的目录下，或者使用相对路径或绝对路径指定图片文件的位置。 另外，确保你的JSP文件中的<meta charset="UTF-8">标签已经设置了正确的字符编码，以防止中文乱码的问题。你可以在JSP文件的头部添加以下代码来设置编码： <%@ page contentType="text/html;charset=UTF-8" language="java" %> 这样，你就可以在JSP文件中添加背景图了。 #### 引用[.reference_title] - *1* *2* [解释JSP文件的声明及属性，＜%@ page language=“java” contentType=“text/html； charset=UTF-8” ...](https://blog.csdn.net/King_wq_2020/article/details/118650230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;](https://blog.csdn.net/Stephen__Xu/article/details/78234828)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

讲解<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql." errorPage=""%> <%@ page import="com.dao.BookDAO"%> <%@ page import="com.actionForm.BookForm"%> <%@ page import="java.util."%> <html> <% Collection coll = (Collection) req

uest.getAttribute("allBooks"); %> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图书列表</title> </head> <body> <h2>图书列表</h2> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td>编号</td> <td>书名</td> <td>作者</td> <td>出版社</td> </tr> <% for (Iterator it = coll.iterator(); it.hasNext();) { BookForm book = (BookForm) it.next(); %> <tr> <td><%=book.getId()%></td> <td><%=book.getName()%></td> <td><%=book.getAuthor()%></td> <td><%=book.getPublisher()%></td> </tr> <% } %> </table> </body> </html> 这是一个 JSP 页面，用于显示图书列表。其中，通过 BookDAO 类获取所有图书的信息，存储在一个 Collection 对象中，并将其设置为 request 对象的属性，以便在 JSP 页面中使用。接着，通过迭代器遍历 Collection 对象，将每个图书的编号、书名、作者和出版社显示在表格中。 需要注意的是，为了避免中文乱码问题，使用了 UTF-8 编码方式。同时，引入了 BookForm 和 BookDAO 类，以及 java.util 包。

相关推荐

html

数据库分页脚本 jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> <head> <meta ...
pdf

使用IDEA编写jsp时EL表达式不起作用的问题及解决方法

charset=UTF-8 language=java %> <%@ taglib uri=http://java.sun.com/jsp/jstl/core prefix=c %> <%@ taglib prefix=fmt uri=http://java.sun.com/jsp/jstl/fmt %> <html> <head> <...
txt

jsp登陆界面源代码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>登录页面</title></head><body> <form name="loginForm" method="post" action="judgeUser.jsp"> <table> <tr> <td>用户名:...

请解释以下代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <% String initParam = config.getInitParameter("init"); out.println(initParam); %> </body> </html>

- 声明指令：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>，用于定义页面的编程语言、内容类型和编码方式。 - DOCTYPE 声明：<!DOCTYPE html PUBLIC "-//W3C//DTD ...

load.jsp为<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> <form action="load.action"> userID:<input type="text" name="userID" id="userID"> password:<input type="password" name="password" id="password"> <input type="checkbox" name="remeber">记住我 <input type="submit" value="登录"> </form> </body> </html>判断user是否能够登录成功，如果可以重定向到showAllProducts.jsp页面,将代码补全

charset=UTF-8" language="java" %> <% String userID = request.getParameter("userID"); // 获取提交的 userID String password = request.getParameter("password"); // 获取提交的 password if("admin"....

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %> <% String username = (String)session.getAttribute("username"); String sex = (String)session.getAttribute("sex"); String sport_hobby = (String)session.getAttribute("sport_hobby"); %> <html> <head> <title>用户信息</title> </head> <body> 用户信息 用户名（昵称）： <%= username %> 性别： <%= sex %> 体育爱好： <%= sport_hobby %> 修改（<%= username %>）昵称</ a> </body> </html>这段代码输出中文时乱码，帮我修改一下

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %> <% String username = (String) session.getAttribute("username"); String sex = (String) session.getAttribute("sex")...

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.sql.*" %> <html> <head> <title>JSP读取数据库</title> </head> <body> 书号 书名 作者 出版社 <% String url="jdbc:mysql://localhost:3306/hhstu?serverTimezone=Asia/test1"; //自己修改 String user="root";//MySQ帐号 String password="123456";//MYSQL密码 Connection conn ; try { Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager.getConnection(url,user,password); Statement stmt=conn.createStatement(); ResultSet rs=stmt.executeQuery("SELECT * FROM books"); while(rs.next()){ %> <%= rs.getInt("bookid") %> <%= rs.getString("bookname") %> <%= rs.getString("writer") %> <%= rs.getString("publish") %> <% } //end while }//end try catch(Exception ex){ ex.printStackTrace(); } %> </body> </html>修改代码

charset=UTF-8" language="java" %> <%@ page import="java.sql.*" %> <html> <head> <title>JSP读取数据库</title> </head> <body> <table border="1" align="center"> <tr> <th>书号</th> <th>书名</th> <th>...

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head>    <title>Title</title> </head> <body> 用户信息 <c:forEach items="${requestScope.list}" var="user"> ${user.id}--${user.userName} --${user.password}
   </c:forEach> </body> </html> 请解释这段代码的每一句的用意

charset=UTF-8" language="java" %>：指定页面的编码格式为 UTF-8，语言为 Java。 2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>：引入 JSTL 的标签库，以便在页面中使用 JSTL 标签。 3....

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Read Text File in JSP</title></head><body><% String filePath = "/WEB-INF/data/file.txt"; // 相对路径，文件放在WEB-INF目录下 String realPath = application.getRealPath(filePath); // 获取文件的真实路径 BufferedReader reader = new BufferedReader(new FileReader(realPath)); String line = null; while ((line = reader.readLine()) != null) { out.println(line); // 输出文件内容到浏览器 } reader.close();%></body></html>优化这段代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Read Text File in JSP</title> </head> <body> <% ...

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> 欢迎<%=session.getAttribute("uname")%> </body> </html> 运行完后显示欢迎null是什么原因

如果运行后显示"欢迎null"，那么可能是由于以下原因之一： 1. 会话属性未设置：在JSP代码中，使用session.getAttribute("uname")获取会话属性的值。如果在设置会话属性之前尝试获取它，会返回null。...

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/context/mytags.jsp"%> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> </script> </body> </html>

其中，第一行指定了JSP页面的语言类型为Java，同时设置了页面的编码格式为UTF-8。第二行是引入了另一个JSP页面"mytags.jsp"。接下来是HTML的部分，包含了一个空的标题和一个空的body。在body中，定义了一个...

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Insert title here</title> </head> <body>

这是一段JSP代码，它的作用是生成一个HTML页面。JSP是Java服务器页面的缩写，它允许开发者在HTML页面中嵌入Java代码和标签，使得动态...在页面的<body>标签内部，我们可以继续编写HTML和Java代码，实现更加复杂的功能。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>作业二：实现请求转发</title> </head> <body> <（1） :（2） （3） ="jsp3login.jsp"></（4） :（5） > </body> </html>

5. > 是 <form> 标签的结束标记。 综合起来，这段代码表示一个包含在 JSP 页面中的表单，当用户提交表单时，会向 "jsp3login.jsp" 发送一个 GET 请求。具体表单中包含哪些元素需要查看完整的代码。

<%-- Created by IntelliJ IDEA. User: MG To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <%@include file="01-jsp.jsp" %> 主体内容 <%@include file="foot.jsp"%> <%@ page isELIgnored="false" %> <% String str="2"; out.write(str); %> </body> </html>

根据您提供的代码片段，我注意到您在页面的底部设置了<%@ page isELIgnored="false" %>，这将启用JSP的EL表达式功能。但是，根据您的描述，JSP表达式仍然不生效。 有几种可能的原因导致JSP表达式不生效： 1. ...

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jst1/core" %> <html> <head> <title>Title</title> </head> <body> <c:if test="true"> true </c:if> <c:else test="false"> false </c:else> </body> </html>

JSP是一种基于Java的Web开发技术，它将HTML页面和Java代码结合起来，可以动态生成页面内容。在这段代码中，首先设置了页面的字符编码和语言环境，然后引入了一个名为c的标签库，该标签库提供了一些常用的JSP标签。在...

请解释以下代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isErrorPage="true"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <% exception.printStackTrace(response.getWriter()); %> </body> </html>

这是一个 JSP（Java Server Pages）页面，用于显示发生异常时的错误信息。在 JSP 页面中，使用<% %>标记来执行 Java ...同时，该页面的 contentType 和 pageEncoding 属性设置为 UTF-8，确保页面以 UTF-8 编码显示。

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta charset="UTF-8"> <title>$Title$</title> <style> .a1{ border: 1px solid green; background-color: aquamarine; width: 100px; height: 100px; } </style> </head> <body> <% int num = Integer.parseInt(request.getParameter("num")); %> <% for (int i = 1; i <= num; i++) { %> <%=i%> <% } %> </body> </html>

这是一个 Java Server Page（JSP）文件，它使用了 Java 语言和 HTML 标记来动态生成网页内容。其中，<%@ %> 标记用于指定页面属性，如编码格式和语言；<% %> 标记用于嵌入 Java 代码；<%= %> 标记用于输出 Java 变量...

如何解决An error occurred at line: [9] in the jsp file: [/addProduct.jsp] Map cannot be resolved to a type 6: To change this template use File | Settings | File Templates. 7: --%> 8: <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9: <%List<Map<String,Object>> list = (List<Map<String, Object>>) session.getAttribute("date");%> 10: <html> 11: <head> 12: <title>Title</title> Stacktrace:

<%@ page import="java.util.Map" %> 如果这个解决方法不起作用，您可以检查一下类路径，确保必要的库已经包含进来了。如果仍然无法解决问题，您可以尝试在项目中引入相关的库文件。例如，如果您正在使用Maven...

最新推荐

recommend-type

WX小程序源码小游戏类

WX小程序源码小游戏类提取方式是百度网盘分享地址
recommend-type

grpcio-1.47.2-cp310-cp310-musllinux_1_1_x86_64.whl

Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
recommend-type

cryptography-42.0.3-cp37-abi3-musllinux_1_1_x86_64.whl

Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

![matlab画柱状图](https://img-blog.csdnimg.cn/3f32348f1c9c4481a6f5931993732f97.png) # 1. MATLAB柱状图概述** MATLAB柱状图是一种图形化工具，用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。 柱状图的优点在于其简单易懂，能够直观地展示数据分布。在信号处理中，柱状图可以帮助工程师识别信号中的模式、趋势和异常情况，从而为信号分析和处理提供有价值的见解。 # 2. 柱状图在信号处理中的应用 柱状图在信号处理
recommend-type

用Spring boot和vue写一个登录注册界面

好的，这是一个比较常见的技术问题，我可以为您提供一些参考资料和思路。首先，您可以使用Spring Boot作为后端框架来处理用户认证和注册的逻辑，比如使用Spring Security实现用户登录认证。同时，您还需要设计相应的数据模型和数据库表结构来存储用户信息。在前端方面，您可以使用Vue.js作为框架来构建登录注册页面，使用Axios来发起API请求并和后端进行交互。当然，在实现过程中，还需要考虑一些具体细节，比如数据校验、安全性和用户体验等方面。希望这些信息能够帮助到您。
recommend-type

JSBSim Reference Manual

JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
recommend-type

"互动学习：行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
recommend-type

MATLAB柱状图在数据分析中的作用：从可视化到洞察

![MATLAB柱状图在数据分析中的作用：从可视化到洞察](https://img-blog.csdnimg.cn/img_convert/1a36558cefc0339f7836cca7680c0aef.png) # 1. MATLAB柱状图概述** 柱状图是一种广泛用于数据可视化的图表类型，它使用垂直条形来表示数据中不同类别或组别的值。在MATLAB中，柱状图通过`bar`函数创建，该函数接受数据向量或矩阵作为输入，并生成相应的高度条形。 柱状图的优点在于其简单性和易于理解性。它们可以快速有效地传达数据分布和组别之间的比较。此外，MATLAB提供了广泛的定制选项，允许用户调整条形颜色、