一、javaweb服务器

1.1、服务器

  1. 就是一段应用程序,类似于是一个装代码的容器。我们可以将可执行的代码放到这存放到容器中,当用户向服务器发送请求时,服务器就会自动去根据请求调用对应的代码来执行。

1.2、服务器的种类

  1. apatch nginx iis **tomcat**。
  2. tomcat:使用java语言开发的服务器。

1.3、tomcat安装

步骤:

1、将压缩包解压到无中文无空格的目录下即可。

2、配置环境变量

3、将mysql的驱动包放在lib目录中

tomcat目录

bin: 可执行的脚本

conf : tomcat配置文件所在的目录

lib: tomcat运行过程中需要使用到的第三方依赖所在的目录

logs: tomcat运行时产生的日志文件所在的目录

temp: tomcat运行时产生的临时文件存储目录

webapps: web项目的部署目录

work: 项目的工作目录

二、WEB项目的常见架构

2.1、CS

c:client(客户端)

s:server(服务端)

特点是:如果客户需要使用系列的话,需要先下载客户端才可以使用。

优点:客户端和服务器都是同一家公司开发的,客户端与服务端的数据交互时可以直接使用自己定义的格式,

缺点:客户端比较庞大时,下载时非常耗费资源,网络不好时,无法完成下载。。。。。。

2.2、BS

b:browser

s:server

特点时:无需下载专用的客户端,直接使用浏览器来代替客户端。

优点:不耗费资源

缺点:浏览器与服务端进行数据交互时,服务端无法直接处理浏览器发送过来的数据。

三、协议

用于规范浏览器和服务端数据交互的格式。

3.1、HTTP协议:

超文本传输协议 hyper text transfer protocal,是一个简单的请求-响应协议。

HTTP请求格式

JavaWeb - 图2

请求行 :

请求头:以键值对的形式出现

空行

请求正文:

GET:没有请求正文,原因是用户提交的参数会拼接在URL上,再传递到后台服务器。

POST:就会存在请求正文。

HTTP响应格式

JavaWeb - 图3

响应状态码

JavaWeb - 图4

常见错误响应状态码

  1. 400-499 客户端错误响应
  1. 400 Bad Request: 请求语法有问题,服务器无法识别:没有host请求头字段,或者设置了超过一个的host请求头字段。
  2. 401 UnAuthorized: 客户端未授权该请求。缺乏有效的身份认证凭证,一般可能是未登陆。登陆后一般都解决问题。
  3. 403 Forbidden: 服务器拒绝响应。权限不足。
  4. 404 Not Found: URL无效或者URL有效但是没有资源。
  5. 405 Method Not Allowed: 请求方式Method不允许。
  6. 406 Not Acceptable: 资源类型不符合服务器要求。
  7. 407 Proxy Authorization Required: 需要代理授权。
  8. 408 Request Timeout:服务器将不再使用的连接关闭。响应头会有Connection: close。
  9. 426 Upgrade Required: 告诉客户端需要升级通信协议。

    1. 500-599 服务器错误响应
  10. 500 Internal Server Error: 服务器内部错误,未捕获。

  11. 502 Bad Gateway: 服务器作为网关使用时,收到上游服务器返回的无效响应。
  12. 503 Service Unavailable: 无法服务。一般发生在因维护而停机或者服务过载。一般还会伴随着返回一个响应头Retry-After: 说明恢复服务的估计时间。
  13. 504 Gateway Timeout: 网关超时。服务器作为网关或者代理,不能及时从上游服务器获取响应返回给客户端。
  14. 505 Http Version Not Supported: 发出的请求http版本服务器不支持。如果请求通过http2发送,服务器不支持http2.0,就会返回该状态码。

3.2、URI和URL

URI:统一资源标识符

作用:用于标识互联网上的某一份资源的名称

ftp://资源名称

public://资源名称

public://a.png

URL:统一资源定位符

URL是URI的子集,比URI更为强大。不光可以标识资源名称,还指定了访问对应资源的路径。

标准的URL: http://192.168.120.136:8098/a.png

ip+port是可以定位一台设备上某个应用程序。

ip:用于唯一标识互联网上的物理设备

port:用于确定设备上的应用程序

四、入门案例

如何在idea中创建web项目?

JavaWeb - 图5

JavaWeb - 图6

4.1、servlet

web项目的三大组件之一

三大组件:servlet(重点) filter listener

作用:接收请求,作出响应。

Servlet是一个接口,该接口有一个实现类GenericServlet,GenericServlet有一个子类HttpServlet(重点)

创建servlet的步骤:

1、创建一个类,继承HttpServlet

2、重写service()

  1. public class LoginServlet extends HttpServlet {
  2. // @Override
  3. // protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  4. // System.out.println("do something .......");
  5. // }
  6. // @Override
  7. // protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  8. //// doGet(req,resp);
  9. // System.out.println("do something .......");
  10. // }
  11. /**
  12. * 重写service(),可以处理任何类型的请求方式
  13. * @param req
  14. * @param resp
  15. * @throws ServletException
  16. * @throws IOException
  17. */
  18. @Override
  19. protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  20. // super.service(req, resp);
  21. System.out.println("do something .......");
  22. }
  23. }

3、在web.xml中配置servlet

  1. <!--servlet的配置-->
  2. <servlet>
  3. <servlet-name>loginServlet</servlet-name>
  4. <servlet-class>com.woniuxy.servlet.LoginServlet</servlet-class>
  5. </servlet>
  6. <servlet-mapping>
  7. <servlet-name>loginServlet</servlet-name>
  8. <!-- http://localhost:8080/login -->
  9. <url-pattern>/login</url-pattern>
  10. </servlet-mapping>

servlet的三种创建方式

1、继承HttpServlet

2、实现servlet接口

JavaWeb - 图7

  1. package com.woniuxy.servlet;
  2. import javax.servlet.*;
  3. import java.io.IOException;
  4. public class ServletInterface implements Servlet {
  5. @Override
  6. public void init(ServletConfig servletConfig) throws ServletException {
  7. }
  8. @Override
  9. public ServletConfig getServletConfig() {
  10. return null;
  11. }
  12. @Override
  13. public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
  14. System.out.println("实现了servlet接口创建的servlet在处理请求");
  15. }
  16. @Override
  17. public String getServletInfo() {
  18. return null;
  19. }
  20. @Override
  21. public void destroy() {
  22. }
  23. }

3、继承GenericServlet

  1. public class ServletExtendsGenericServlet extends GenericServlet {
  2. @Override
  3. public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
  4. System.out.println("ServletExtendsGenericServlet do something ....");
  5. }
  6. }

url-pattern的配置
  1. <!--
  2. url-pattern用于匹配url中除去协议+ip+端口之后的内容
  3. url-pattern的值编写时,可以使用*通配符
  4. 如果使用通配符,请注意*只能出现在最前或最后,不能出现在中间
  5. url-pattern的值编写方式有三种:精确匹配、前缀匹配、后缀匹配
  6. 精确匹配:/user
  7. 前缀匹配:/user/*
  8. 后缀匹配:*.do
  9. 匹配所有:/* 这种写法在servlet中是不会这么用的。
  10. url-pattern可以配置多个
  11. -->
  12. <url-pattern>*.do</url-pattern>

生命周期

servlet的生命周期:

init():在servlet初始化时执行

destroy():在servlet销毁的时候执行

service():在servlet接收到请求时执行的

servlet的生命周期基于load-on-startup的配置与否,决定servlet初始化时机。

如果不配置,则servlet在第一次接收用户请求时,完成初始化

如果配置了,则在tomcat启动时,servlet就完成了初始化

load-on-startup的配置位置:在标签中。

  1. <servlet>
  2. <servlet-name>loginServlet</servlet-name>
  3. <servlet-class>com.woniuxy.servlet.LoginServlet</servlet-class>
  4. <!--<load-on-startup>的取值是非零整数,值越小,越先初始化-->
  5. <load-on-startup>1</load-on-startup>
  6. </servlet>

servletConfig
  1. getServletConfig()用于获取当前servlet的配置信息对象ServletConfig,每个ServletConfig对象都代表当前servletweb.xml文件中的配置信息,调用该对象的相应方法可以不必进行XML解析而直接获取对应配置信息。

ServletConfig
  1. ServletConfig是一个接口,有4个方法:
  • getServletName():获取中的内容;
  • getServletContext():获取servlet上下文;
  • getInitParameter(String name):获取servlet初始化参数,与对应;
  • getInitParameterNames():获取所有初始化参数名称,返回的是一个集合(迭代器)。
  1. <servlet>
  2. <servlet-name>loginServlet</servlet-name>
  3. <servlet-class>com.woniuxy.servlet.LoginServlet</servlet-class>
  4. <!--<load-on-startup>的取值是非零整数,值越小,越先初始化-->
  5. <init-param>
  6. <param-name>a</param-name>
  7. <param-value>1</param-value>
  8. </init-param>
  9. <init-param>
  10. <param-name>b</param-name>
  11. <param-value>2</param-value>
  12. </init-param>
  13. <load-on-startup>1</load-on-startup>
  14. </servlet>
  1. public class LoginServlet extends HttpServlet {
  2. @Override
  3. public void init() throws ServletException {
  4. System.out.println("LoginServlet被初始化了");
  5. }
  6. @Override
  7. public void destroy() {
  8. System.out.println("LoginServlet被销毁了");
  9. }
  10. @Override
  11. protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  12. // super.service(req,resp);
  13. // System.out.println("do something......");
  14. //获取servletConfig对象
  15. ServletConfig config = getServletConfig();
  16. //获取servlet名称
  17. System.out.println(config.getServletName());
  18. //根据param-name的值去获取param-value
  19. System.out.println(config.getInitParameter("a"));
  20. //获取所有param-name的值
  21. Enumeration<String> initParameterNames = config.getInitParameterNames();
  22. while (initParameterNames.hasMoreElements()) {
  23. String paramName = initParameterNames.nextElement();
  24. System.out.println(config.getInitParameter(paramName));
  25. }
  26. }
  27. }

解决控制台乱码:

JavaWeb - 图8

4.2、HttpServletRequest

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>$Title$</title>
  5. </head>
  6. <body>
  7. <form action="/login" method="post">
  8. <table>
  9. <tr>
  10. <td>用户名</td>
  11. <td><input type="text" name="username"></td>
  12. </tr>
  13. <tr>
  14. <td>密码</td>
  15. <td><input type="password" name="password"></td>
  16. </tr>
  17. <tr>
  18. <td colspan="2">
  19. <input type="submit" value="立即登录">
  20. </td>
  21. </tr>
  22. </table>
  23. </form>
  24. </body>
  25. </html>

从请求行中获取数据
  1. //获取请求行中的内容
  2. //返回的是请求的提交方式
  3. String method = req.getMethod();
  4. System.out.println(method);
  5. //获取协议
  6. String scheme = req.getScheme();
  7. System.out.println(scheme);
  8. //获取请求URI
  9. String requestURI = req.getRequestURI();
  10. System.out.println(requestURI);
  11. //获取请求的URL
  12. StringBuffer requestURL = req.getRequestURL();
  13. System.out.println(requestURL.toString());

从请求头中获取数据
  1. //根据头的key去获取值
  2. String s = req.getHeader("Host");
  3. System.out.println(s);
  4. //获取所有请求头中的key
  5. Enumeration<String> headerNames = req.getHeaderNames();
  6. while (headerNames.hasMoreElements()) {
  7. String headerName = headerNames.nextElement();
  8. System.out.println(req.getHeader(headerName));
  9. }

获取用户传递的参数(重点掌握)
  1. //根据表单控件的name属性值或者url中?传参的参数名去获取对应的值
  2. String username = req.getParameter("username");
  3. String password = req.getParameter("password");
  4. System.out.println(username+":"+password);

4.3、HttpServletResponse

对响应对象进行相应的设置

  1. package com.woniuxy.servlet;
  2. import javax.servlet.ServletException;
  3. import javax.servlet.http.HttpServlet;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import java.io.IOException;
  7. import java.io.PrintWriter;
  8. public class TestResponseServlet extends HttpServlet {
  9. @Override
  10. protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  11. //HttpServletResponse响应对象
  12. //设置响应状态码
  13. // resp.setStatus(400);
  14. //响应错误码
  15. //resp.sendError(400);
  16. // resp.sendError(400,"类型转换错误");
  17. //设置响应内容的类型
  18. resp.setContentType("text/html;charset=utf-8");
  19. //获取输出流
  20. PrintWriter writer = resp.getWriter();
  21. //通过输出流向浏览器写出内容
  22. writer.write("<h1>今天的天气真的不错,又不热又不冷。</h1>");
  23. //设置响应头信息,使用setHeader()对同一个key进行添加时,会覆盖
  24. resp.setHeader("a","1");
  25. resp.setHeader("a","2");
  26. resp.setHeader("a","3");
  27. resp.setHeader("a","4");
  28. //添加响应头信息,使用addHeader()对同一个key进行添加时,不会覆盖
  29. resp.addHeader("a","5");
  30. resp.addHeader("a","6");
  31. resp.addHeader("a","7");
  32. resp.addHeader("a","8");
  33. resp.setHeader("a","9");
  34. }
  35. }

4.4、BaseServlet

  1. /**
  2. * 1、从请求参数中获取method的值
  3. * 2、根据method的值通过反射API生成Method对象
  4. * 3、调用invoke执行对应的方法,并对方法的返回值进行不同的处理。(指定不同的跳转方式)
  5. */
  6. public class BaseServlet extends HttpServlet {
  7. /**
  8. * 假设请求的发送方式是:http://localhost:8080/user?mehtod=register
  9. * @param req
  10. * @param resp
  11. * @throws ServletException
  12. * @throws IOException
  13. */
  14. @Override
  15. protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  16. String methodName = req.getParameter("method");//null ""
  17. System.out.println(methodName);
  18. if (null==methodName||"".equals(methodName)) {//用户未传递method参数或method参数未给值
  19. throw new RuntimeException("请求中未传递method参数,后台无法调用具体的方法来处理您的业务!");
  20. }
  21. try {
  22. //this:请求访问的是哪个servelt,这个this就是该servlet的对象
  23. Method method = this.getClass().getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
  24. Object returnValue = method.invoke(this, req, resp);
  25. //对于返回值来说,如果为null,表示方法没有返回值(ajax)
  26. if (null==returnValue) {//对ajax请求的处理
  27. return ;
  28. }
  29. String methodReturnValue = (String) returnValue;
  30. if (methodReturnValue.contains(":")) {//如果返回值中有:存在,表示指定了跳转方式
  31. String[] values = methodReturnValue.split(":");
  32. String operation=values[0];//跳转方式
  33. String path=values[1];//跳转路径
  34. if (operation.equals("r")) {
  35. resp.sendRedirect(path);
  36. } else if (operation.equals("f")) {
  37. req.getRequestDispatcher(path).forward(req,resp);
  38. }else{
  39. throw new RuntimeException("您指定的跳转方式本系统尚不支持!!!");
  40. }
  41. }else{//如果没有,使用默认的跳转方式
  42. resp.sendRedirect(methodReturnValue);
  43. }
  44. } catch (Exception e) {
  45. e.printStackTrace();
  46. }
  47. }
  48. }

使用BaseServlet的要点:

JavaWeb - 图9

4.5、JSP

  1. java servlet pagesjava服务端页面。本质上来说,JSP就是一个servlet

jsp的执行原理:

  1. ![](https://woniumd.oss-cn-hangzhou.aliyuncs.com/20210628142917.png#id=VXiX2&originHeight=626&originWidth=1286&originalType=binary&ratio=1&status=done&style=none)

JSP页面中可以出现的哪些内容:

html css js image java(小脚本、声明、注释、表达式…..)

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>Title</title>
  5. <style>
  6. div{
  7. width: 200px;
  8. /*height: 200px;*/
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <!--
  14. html注释
  15. 在jsp页面中要编写java语句,应该使用以下的几种形式:
  16. -->
  17. <%--
  18. jsp注释: jspServlet解析相应的jsp文件时,jsp注释是不会被解析的。
  19. --%>
  20. <script>
  21. // var msg="abc";
  22. </script>
  23. <%--小脚本 _jspService(){} --%>
  24. <%
  25. int i=0;
  26. System.out.println(i);
  27. %>
  28. <%-- 表达式: 语法:<%= %> --%>
  29. <%=i%>
  30. <%-- 声明:语法:<%! %> 写在声明中的内容会以类的成员的形式出现--%>
  31. <%!
  32. int x=1;
  33. public String getString(){
  34. return "今天星期一";
  35. }
  36. %>
  37. <%=getString()%>
  38. </body>
  39. </html>

jsp指令
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%@ page import="com.woniuxy.domain.User" %>
  3. <%@ include file="jspStudy.jsp"%>
  4. <%-- 引入JSTL --%>
  5. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  6. <html>
  7. <head>
  8. <title>Title</title>
  9. </head>
  10. <body>
  11. <%-- jsp页面中可以出现三种指令:page include taglib --%>
  12. <%--
  13. page指令
  14. 作用:用于对当前页面进行对应的一些设置。
  15. 语法:<%@ page 参数列表 %>
  16. contentType:设置jsp页面的内容类型
  17. language:表示支持的语言
  18. pageEncoding:设置页面的字符编码集
  19. import:导包
  20. isELIgnored:用于指定当前JSP页面是否忽略EL表达式,
  21. 一般情况下不会设置它,当页面中的EL表达不生效时,需要手动来指定
  22. --%>
  23. <%
  24. User user = new User();
  25. %>
  26. <%--
  27. include指令
  28. 作用:用于引入外部资源
  29. 语法:<%@ include 参数列表 %>
  30. --%>
  31. <%--
  32. taglib指令
  33. 作用:用于引入标签库,一般会使用该指令引入jtsl
  34. 语法:<%@ taglib 参数列表 %>
  35. --%>
  36. <c:out value="今天星期一,明天星期二"/>
  37. </body>
  38. </html>

4.6、EL表达式:

  1. expression language:表达式语言。
  2. 语法:${},**作用:用于从作用域对象中获取值。**

四大作用域
  1. 作用域对象:jsp有四大作用域对象
域对象 内置对象
pageScope pageContext
requestScope request
sessionScope session
applicationScope application

jsp的九大内置对象:

JSP九大内置对象
  1. 内置对象就是由JSP页面转译成的servlet_jspService()方法中存在的几个对象。
  1. public void _jspService(final javax.servlet.http.HttpServletRequest request, final javax.servlet.http.HttpServletResponse response)
  2. throws java.io.IOException, javax.servlet.ServletException {
  3. ......
  4. final javax.servlet.jsp.PageContext pageContext;
  5. javax.servlet.http.HttpSession session = null;
  6. final javax.servlet.ServletContext application;
  7. final javax.servlet.ServletConfig config;
  8. javax.servlet.jsp.JspWriter out = null;
  9. final java.lang.Object page = this;
  10. ......
  1. 9大内置对象包括_jspService()的两个参数requestresponse,以及_jspService()方法中的pageContextsessionapplicationconfigoutpage和异常对象Exception
  2. **pageContext**
  3. pageContext是页面上下文对象,封存了其他内置对象,封存了当前JSP的运行信息。每个JSP文件单独拥有一个pageContext对象,只在当前页面有效。
  1. //通过pageContext对象调用对应的get***()方法可以获取其他内置对象。
  2. pageContext.getServletContext();
  1. **session**
  2. session对象用来存储用户的不同请求的共享数据的。该对象可以通过page指令控制是否获取。
  3. **application**
  4. application就是ServletContext对象,一个项目只有一个。存储用户共享数据的对象,并完成其他操作。
  5. **config**
  6. config就是ServletConfig,主要是用来获取web.xml中的配置数据,完成一些初始化数据的读取。
  7. **out**
  8. out是响应对象,Jsp内部使用。带有缓冲区的响应对象,效率高于response对象。
  9. **page**
  10. page代表当前JSP的对象。
  11. **request**
  12. request存放了当前请求数据的对象。由tomcat服务器创建。一次请求
  13. **response**
  14. response是响应对象,用来响应请求处理结果给浏览器的对象。设置响应头,重定向。
  15. **exception**
  16. exception是异常对象,存储了当前运行的异常信息。

JavaWeb - 图10

  1. <%@ page import="com.woniuxy.domain.User" %>
  2. <%@ page import="java.util.Arrays" %>
  3. <%@ page import="java.util.HashMap" %>
  4. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  5. <html>
  6. <head>
  7. <title>Title</title>
  8. </head>
  9. <body>
  10. <%--
  11. el表达式:是用于从作用域对象中取值
  12. 如果不指定作用域对象去获取,此时会从最小的域逐级向上查找,
  13. 直到找到为止,如果到最后都没有找到,返回空字符串""
  14. 作用域范围由小及大:
  15. 页面域(pageScope)<请求域(requestScope)<会话域(sessionScope)<应用域(applicationScope
  16. 如果指定作用域获取,那么只在当前域中查找,没找到时直接返回"",不会向更大的域中去查找了。
  17. --%>
  18. <%
  19. //向请求对象中保存了一个用户对象
  20. // request.setAttribute("user",new User("tom","111"));
  21. session.setAttribute("user",new User("jack","222"));
  22. request.setAttribute("nums", Arrays.asList(1,2,3,4));
  23. HashMap<String, String> map = new HashMap<>();
  24. map.put("a","1");
  25. map.put("b","2");
  26. map.put("c","3");
  27. session.setAttribute("map",map);
  28. %>
  29. ${requestScope.user.username}
  30. <%--
  31. el表达式的运算符: . []
  32. “.”:如果域中存储的是某个类的对象,此时可以使用.运算符直接获取该类型的成员变量中存储的值
  33. “[]”:一般对应于集合元素的访问
  34. --%>
  35. <hr>
  36. ${nums[2]>10}
  37. <hr>
  38. ${map["a"]}
  39. </body>
  40. </html>

4.7、JSTL

  1. JSTLJava server pages standarded tag library,即JSP标准标签库)
  2. 使用条件:

1、导入相应的jar包:jstl.jar, standard.jar

2、在jsp页面中,需要通过taglib指令引入jstl

  1. <%@ taglib prifex="c" uri="http://java.sun.com/jsp/jstl/core"%>
  1. 作用:
  2. 使用JSTL可以解决jsp页面中出现大量java代码导致可读性差的问题,使用了JSLT之后,jsp页面中就不会出现java代码,全部以标签的形式进行展示。

JSTL常用的标签:

  1. <%@ page import="com.woniuxy.domain.User" %>
  2. <%@ page import="java.util.Arrays" %>
  3. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  5. <html>
  6. <head>
  7. <title>Title</title>
  8. </head>
  9. <body>
  10. <%--jstl常用标签:--%>
  11. <%--c:set:作用:用于修改域对象中存储的对象的属性值--%>
  12. <%
  13. request.setAttribute("user",new User("tom","111"));
  14. request.setAttribute("nums", Arrays.asList(1,2,3,4,5,6));
  15. %>
  16. <c:set target="${user}" property="username" value="jack"/>
  17. <c:out value="${user.username}"/>
  18. <hr>
  19. <%--
  20. c:if:类似于java中的if
  21. --%>
  22. <c:if test="${user.username.equals('tom')}">
  23. <c:out value="${user.username}"/>
  24. </c:if>
  25. <%--
  26. c:choose(switch)\c:when(case)\c:otherwise(default):类似于java中的switch
  27. --%>
  28. <hr>
  29. <c:choose>
  30. <c:when test="${user.username.equals('tom')}">
  31. <c:out value="${user.username}"/>
  32. </c:when>
  33. <c:when test="${user.username.equals('jack')}">
  34. <c:out value="${user.username}"/>
  35. </c:when>
  36. <c:otherwise>
  37. <c:out value="cici"/>
  38. </c:otherwise>
  39. </c:choose>
  40. <%--
  41. c:foreach:遍历
  42. items:要被遍历的集合
  43. var:每次遍历从集合中获取的对象
  44. begin:从集合的哪个位置开始
  45. end:遍历到集合的哪个位置结束
  46. for(int i=0;i<nums.size();i++){
  47. nums.get(i)
  48. }
  49. --%>
  50. <hr>
  51. <c:forEach items="${nums}" var="num" begin="0" end="${nums.size()}">
  52. <c:out value="${num}"/>
  53. </c:forEach>
  54. <hr>
  55. <%--
  56. c:remove:移除域对象中key
  57. --%>
  58. <c:remove var="user"></c:remove>
  59. <c:out value="${user.username}"/>
  60. <hr>
  61. <%--
  62. c:redirect:重定向
  63. --%>
  64. <%-- <c:redirect url="login.jsp"></c:redirect>--%>
  65. <hr>
  66. <c:url value="/page/a.jsp"></c:url>
  67. </body>
  68. </html>

4.8、过滤器

web项目三大组件之一,执行在servlet之前。

应用场景:登录验证,统一字符编码设置,敏感字符过滤,权限验证等。

过滤器生命周期与tomcat保持一致,tomcat启动时会调用filter的init方法,关闭时调用destroy方法。

创建过滤器需要实现javax.servlet.Filter接口

  1. /**
  2. * 实现了Filter接口的类,就会成为一个过滤器
  3. */
  4. public class FirstFilter implements Filter {
  5. /**
  6. * 过滤器初始化时执行的方法
  7. * @param filterConfig
  8. * @throws ServletException
  9. */
  10. @Override
  11. public void init(FilterConfig filterConfig) throws ServletException {
  12. System.out.println("过滤器被初始化了");
  13. }
  14. /**
  15. * 过滤器执行过滤的方法
  16. * @param servletRequest
  17. * @param servletResponse
  18. * @param filterChain
  19. * @throws IOException
  20. * @throws ServletException
  21. */
  22. @Override
  23. public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  24. //做一些逻辑处理,基于处理的结果决定请求要不要放行,如果放行,请求就会进入servlet中去
  25. //filterChain.doFilter(servletRequest,servletResponse);//放行
  26. }
  27. /**
  28. * 过滤器销毁时执行的方法
  29. */
  30. @Override
  31. public void destroy() {
  32. System.out.println("过滤器被销毁了");
  33. }
  34. }

配置过滤器

  1. <!--配置过滤器-->
  2. <filter>
  3. <filter-name>firstFilter</filter-name>
  4. <filter-class>com.woniuxy.filter.FirstFilter</filter-class>
  5. </filter>
  6. <filter-mapping>
  7. <filter-name>firstFilter</filter-name>
  8. <url-pattern>/user</url-pattern>
  9. </filter-mapping>

也可以使用@WebFilter注解完成过滤器配置

  1. @WebFilter("/user")

登录验证

登录验证分为两种场景:

1、未登录时,不允许访问系统中的任何资源

2、未登录时,不允许访问系统中的特定资源

两种不同场景下,登录验证的实现是不同的。

登录验证的实现:

1、登录成功时,通过session保存登录状态

2、在过滤器中通过session获取登录状态,如果值为空,表示未登录,应重定向到登录页面,不为空,放行请求即可。

验证特定资源需要登录:

  1. /**
  2. * 登录验证的过滤器
  3. * url-pattern应该如何配置?
  4. * 对于静态资源是不必进行登录验证的,登录验证的是动态资源。
  5. *
  6. *
  7. * 验证的是特定资源需要登录
  8. *
  9. *
  10. */
  11. @WebFilter({"/cart.do","/order.do"})
  12. public class LoginFilter2 implements Filter {
  13. @Override
  14. public void init(FilterConfig filterConfig) throws ServletException {
  15. }
  16. @Override
  17. public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  18. HttpServletRequest request = (HttpServletRequest) servletRequest;
  19. HttpServletResponse response = (HttpServletResponse) servletResponse;
  20. Object isLogin = request.getSession().getAttribute("isLogin");
  21. if (null == isLogin) {//为空,表示未登录
  22. response.sendRedirect("/login.jsp");
  23. } else {
  24. filterChain.doFilter(request, response);//如果有登录状态,则直接放行
  25. }
  26. }
  27. @Override
  28. public void destroy() {
  29. }
  30. }

验证所有资源需要登录:

  1. /**
  2. * 登录验证的过滤器
  3. * url-pattern应该如何配置?
  4. * 对于静态资源是不必进行登录验证的,登录验证的是动态资源。
  5. *
  6. *
  7. * 验证所有资源都需要登录
  8. *
  9. *
  10. */
  11. //@WebFilter({"*.jsp","*.do"})
  12. public class LoginFilter implements Filter {
  13. @Override
  14. public void init(FilterConfig filterConfig) throws ServletException {
  15. }
  16. @Override
  17. public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  18. HttpServletRequest request = (HttpServletRequest) servletRequest;
  19. HttpServletResponse response = (HttpServletResponse) servletResponse;
  20. //进行登录验证
  21. //有一些特定的资源是应该直接放行的:login.jsp user.do
  22. String requestURI = request.getRequestURI();//user.do
  23. if ("/login.jsp".equals(requestURI)||"/register.jsp".equals(requestURI)) {//如果访问的是login.jsp,则直接放行
  24. filterChain.doFilter(request,response);
  25. } else if ("/user.do".equals(requestURI)) {
  26. String method = request.getParameter("method");
  27. if (method.equals("login") || method.equals("register")) {
  28. filterChain.doFilter(request,response);
  29. }else{
  30. checkLoginStatus(request,response,filterChain);
  31. }
  32. }else {
  33. checkLoginStatus(request,response,filterChain);
  34. }
  35. }
  36. public void checkLoginStatus(HttpServletRequest request,HttpServletResponse response,FilterChain filterChain) throws IOException, ServletException {
  37. //其余的资源就应该进行登录验证:
  38. // 从session中去获取登录状态,如果登录状态存在,则放行,如果不存在,则重定向到登录页面。
  39. Object isLogin = request.getSession().getAttribute("isLogin");
  40. if (null == isLogin) {//为空,表示未登录
  41. response.sendRedirect("/login.jsp");
  42. } else {
  43. filterChain.doFilter(request, response);//如果有登录状态,则直接放行
  44. }
  45. }
  46. @Override
  47. public void destroy() {
  48. }
  49. }

统一字符编码的设置

web.xml

  1. <filter>
  2. <filter-name>charsetFilter</filter-name>
  3. <filter-class>com.woniuxy.filter.CharsetFilter</filter-class>
  4. <init-param>
  5. <param-name>encoding</param-name>
  6. <param-value>UTF-8</param-value>
  7. </init-param>
  8. </filter>
  9. <filter-mapping>
  10. <filter-name>charsetFilter</filter-name>
  11. <url-pattern>/*</url-pattern>
  12. </filter-mapping>

过滤器charsetFilter

  1. public class CharsetFilter implements Filter {
  2. private String encoding;
  3. @Override
  4. public void init(FilterConfig filterConfig) throws ServletException {
  5. String encoding = filterConfig.getInitParameter("encoding");
  6. if (null==encoding||"".equals(encoding)) {
  7. encoding="utf-8";
  8. }
  9. this.encoding=encoding;
  10. }
  11. /**
  12. * 字符编码设置
  13. * @param servletRequest
  14. * @param servletResponse
  15. * @param filterChain
  16. * @throws IOException
  17. * @throws ServletException
  18. */
  19. @Override
  20. public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  21. HttpServletRequest request = (HttpServletRequest) servletRequest;
  22. HttpServletResponse response = (HttpServletResponse) servletResponse;
  23. //进行字符编码设置
  24. request.setCharacterEncoding(encoding);
  25. response.setCharacterEncoding(encoding);
  26. //不是固定的东西,基于请求的方式进行不同的设置,今后如果发送的是ajax请求,这里的代码需要进行对应的修改。
  27. response.setContentType("text/html;charset="+encoding);
  28. filterChain.doFilter(request,response);
  29. }
  30. @Override
  31. public void destroy() {
  32. }
  33. }

filter链的执行顺序

在开发过程中,建议:每个过滤器处理自己的逻辑即可,不要让过滤器存在依赖关系。

如果需要指定过滤器的执行顺序,根据过滤器的配置方式,有不同的设置。

1、web.xml

过滤器链的执行顺序由filter-mapping的配置顺序决定

2、注解配置

过滤器链的执行顺序由filtername的字母顺序来决定

敏感字符过滤

1、设定一些敏感词汇

2、请求中所有的用户提交的参数都应该进行敏感词汇的过滤

过滤器

  1. @WebFilter("/word")
  2. public class WordFilter implements Filter {
  3. @Override
  4. public void init(FilterConfig filterConfig) throws ServletException {
  5. }
  6. @Override
  7. public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  8. //过滤请求参数的数据
  9. //1、设定敏感词汇
  10. List<String> words = Arrays.asList("sb","操","妈");
  11. //2、从请求中获取所有用户提交的参数
  12. HttpServletRequest request = (HttpServletRequest) servletRequest;
  13. HttpServletResponse response = (HttpServletResponse) servletResponse;
  14. Enumeration<String> parameterNames = request.getParameterNames();
  15. //创建一个集合,用于保存进行了过滤之后的干净的字符串
  16. ArrayList<String> newStrs = new ArrayList<>();
  17. while (parameterNames.hasMoreElements()) {
  18. String parameterName = parameterNames.nextElement();
  19. String parameter = request.getParameter(parameterName);
  20. // 操场 妈妈叫你回家吃饭 好好学习
  21. for (String word : words) {
  22. if (parameter.contains(word)) {
  23. parameter = parameter.replace(word, "***");
  24. }
  25. }
  26. newStrs.add(parameter);
  27. }
  28. request.setAttribute("newStrs",newStrs);
  29. filterChain.doFilter(request,response);
  30. }
  31. @Override
  32. public void destroy() {
  33. }
  34. }

servlet

  1. @WebServlet("/word")public class WordServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { List<String> newStrs = (List<String>) req.getAttribute("newStrs"); System.out.println(newStrs); }}

4.9、listener(不是重点内容)

web三大组件之一,又称之为监听器。

作用:用于监听域对象(除pageContext以外)的创建和销毁,以及域对象当中的属性变化。

监听器分类:

第一类:监听域对象(除pageContext以外)的创建和销毁

第二类:监听域对象当中的属性变化 :setAttribute() removeAttribute()

req.setAttribute(“name”,”tom”) 对一个key的第一次赋值,对属性中进行新增操作

req.setAttribute(“name”,”jack”) 对同一个key的第二次或更多次赋值时,对属性进行修改操作

req.removeAttribute(“name”) 删除一个key,删除的属性

第三类:监听session域中的javaBean的属性变化。 仅作了解。

创建监听器

1、创建类,实现对应的监听器接口。

2、复写方法

3、配置监听器

第一类监听器

  1. package com.woniuxy.listener;
  2. import javax.servlet.ServletContextEvent;
  3. import javax.servlet.ServletContextListener;
  4. import javax.servlet.ServletRequestEvent;
  5. import javax.servlet.ServletRequestListener;
  6. import javax.servlet.annotation.WebListener;
  7. import javax.servlet.http.HttpSessionEvent;
  8. import javax.servlet.http.HttpSessionListener;
  9. /**
  10. * 监听域对象的创建和销毁的
  11. */
  12. @WebListener
  13. public class MyListener implements HttpSessionListener, ServletRequestListener, ServletContextListener {
  14. /**
  15. * session对象创建时,执行sessionCreated
  16. * @param httpSessionEvent
  17. */
  18. @Override
  19. public void sessionCreated(HttpSessionEvent httpSessionEvent) {
  20. System.out.println("session被创建了");
  21. }
  22. @Override
  23. public void sessionDestroyed(HttpSessionEvent httpSessionEvent) {
  24. System.out.println("session被销毁了");
  25. }
  26. @Override
  27. public void contextInitialized(ServletContextEvent servletContextEvent) {
  28. }
  29. @Override
  30. public void contextDestroyed(ServletContextEvent servletContextEvent) {
  31. }
  32. @Override
  33. public void requestDestroyed(ServletRequestEvent servletRequestEvent) {
  34. }
  35. @Override
  36. public void requestInitialized(ServletRequestEvent servletRequestEvent) {
  37. }
  38. }

第二类监听器

  1. package com.woniuxy.listener;
  2. import javax.servlet.ServletContextAttributeEvent;
  3. import javax.servlet.ServletContextAttributeListener;
  4. import javax.servlet.ServletRequestAttributeEvent;
  5. import javax.servlet.ServletRequestAttributeListener;
  6. import javax.servlet.annotation.WebListener;
  7. import javax.servlet.http.HttpSessionAttributeListener;
  8. import javax.servlet.http.HttpSessionBindingEvent;
  9. /**
  10. * 监听域对象属性的变更
  11. */
  12. @WebListener
  13. public class AttributeListener implements HttpSessionAttributeListener, ServletRequestAttributeListener, ServletContextAttributeListener {
  14. /**
  15. * session对象第一次调用setAttribute()对某个key进行赋值操作时,监听器调用attributeAdded
  16. * @param httpSessionBindingEvent
  17. */
  18. @Override
  19. public void attributeAdded(HttpSessionBindingEvent httpSessionBindingEvent) {
  20. System.out.println("attributeAdded");
  21. }
  22. /**
  23. * session对象调用removeAttribute()对某个key进行移除操作时,监听器调用attributeRemoved
  24. * @param httpSessionBindingEvent
  25. */
  26. @Override
  27. public void attributeRemoved(HttpSessionBindingEvent httpSessionBindingEvent) {
  28. System.out.println("attributeRemoved");
  29. }
  30. /**
  31. * session对象第二次或更多次调用setAttribute()对某个key进行赋值操作时,监听器调用attributeReplaced
  32. * @param httpSessionBindingEvent
  33. */
  34. @Override
  35. public void attributeReplaced(HttpSessionBindingEvent httpSessionBindingEvent) {
  36. System.out.println("attributeReplaced");
  37. }
  38. @Override
  39. public void attributeAdded(ServletContextAttributeEvent servletContextAttributeEvent) {
  40. }
  41. @Override
  42. public void attributeRemoved(ServletContextAttributeEvent servletContextAttributeEvent) {
  43. }
  44. @Override
  45. public void attributeReplaced(ServletContextAttributeEvent servletContextAttributeEvent) {
  46. }
  47. @Override
  48. public void attributeAdded(ServletRequestAttributeEvent servletRequestAttributeEvent) {
  49. }
  50. @Override
  51. public void attributeRemoved(ServletRequestAttributeEvent servletRequestAttributeEvent) {
  52. }
  53. @Override
  54. public void attributeReplaced(ServletRequestAttributeEvent servletRequestAttributeEvent) {
  55. }
  56. }

监听器应用:

统计在线人数

创建监听器,实现httpsessionlistenter(统计在线人数增长)、servletcontextlistener(创建一个保存在线人数的变量)

统计在线登录人数

  1. @WebListener
  2. public class CountOnlineUser implements HttpSessionListener, ServletContextListener, HttpSessionAttributeListener {
  3. @Override
  4. public void contextInitialized(ServletContextEvent servletContextEvent) {
  5. //servletcontext对象初始化时,向servletContext对象中保存一个存放在线人数的变量。
  6. ServletContext context = servletContextEvent.getServletContext();
  7. context.setAttribute("onlineUserNum",0);//在线人数
  8. context.setAttribute("onlineLoginUserNum",0);//在线登录人数
  9. }
  10. @Override
  11. public void contextDestroyed(ServletContextEvent servletContextEvent) {
  12. }
  13. @Override
  14. public void sessionCreated(HttpSessionEvent httpSessionEvent) {
  15. //从servletcontext对象获取在线人数的变量,并对其进行自增操作,然后重新设置回去
  16. ServletContext context = httpSessionEvent.getSession().getServletContext();
  17. Integer onlineUserNum = (Integer) context.getAttribute("onlineUserNum");
  18. context.setAttribute("onlineUserNum",++onlineUserNum);
  19. }
  20. @Override
  21. public void sessionDestroyed(HttpSessionEvent httpSessionEvent) {
  22. }
  23. /**
  24. *
  25. * @param httpSessionBindingEvent
  26. */
  27. @Override
  28. public void attributeAdded(HttpSessionBindingEvent httpSessionBindingEvent) {
  29. String name = httpSessionBindingEvent.getName();
  30. if (name.equals("isLogin")) {
  31. //在线登录人数就应该加一
  32. ServletContext context = httpSessionBindingEvent.getSession().getServletContext();
  33. Integer onlineLoginUserNum = (Integer) context.getAttribute("onlineLoginUserNum");
  34. context.setAttribute("onlineLoginUserNum",++onlineLoginUserNum);
  35. }
  36. }
  37. @Override
  38. public void attributeRemoved(HttpSessionBindingEvent httpSessionBindingEvent) {
  39. String name = httpSessionBindingEvent.getName();
  40. if (name.equals("isLogin")) {
  41. System.out.println("session中移除了isLogin");
  42. //在线登录人数就应该减一
  43. ServletContext context = httpSessionBindingEvent.getSession().getServletContext();
  44. Integer onlineLoginUserNum = (Integer) context.getAttribute("onlineLoginUserNum");
  45. context.setAttribute("onlineLoginUserNum",--onlineLoginUserNum);
  46. }
  47. }
  48. @Override
  49. public void attributeReplaced(HttpSessionBindingEvent httpSessionBindingEvent) {
  50. }
  51. }

4.10、ajax

Ajax:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),本质上是一种浏览器端的技术。Ajax不是新的编程语言,而是一种使用现有标准(HTML / XHTML、CSS、JavaScript / DOM)的新方法。

作用:通过javascript域()向服务端发送请求,根据请求返回的结果,使用DOM来局部刷新部分网页。

优点:可以更方便和快速的对用户进行响应,用户体验会更好。

缺点:无法回退。

核心对象:XmlHttpRequest,请求由该对象向外发起,响应由该对象进行接收。

XmlHttpRequest的属性

JavaWeb - 图11

XmlHttpRequest的方法

JavaWeb - 图12

原生ajax的实现:

login.jsp

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>Title</title>
  5. </head>
  6. <body>
  7. <div id="div" style="width: 400px;height: 400px;border: 1px solid black;"></div>
  8. <input type="button" value="测试ajax请求" id="btn">
  9. <script>
  10. document.getElementById("btn").onclick=function () {
  11. var div = document.getElementById("div");
  12. //1、创建xmlhttprequest
  13. var xmlHttpRequest = new XMLHttpRequest();
  14. //2、设置请求内容
  15. xmlHttpRequest.open("GET","/ajax.do?username=tom&password=111")
  16. //3、发送请求
  17. xmlHttpRequest.send(null)
  18. //4、处理响应,通过DOM操作局部刷新网页
  19. xmlHttpRequest.onreadystatechange=function () {
  20. if (xmlHttpRequest.readyState == 4) {//代表请求完成
  21. if (xmlHttpRequest.status == 200) {//根据不同的响应状态码进行不同页面刷新
  22. div.innerText=xmlHttpRequest.responseText
  23. }else if (xmlHttpRequest.status == 404) {
  24. div.innerText="404"
  25. }
  26. }
  27. }
  28. }
  29. </script>
  30. </body>
  31. </html>

ajaxservlet

  1. @WebServlet("/ajax.do")
  2. public class AjaxServlet extends HttpServlet {
  3. @Override
  4. protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  5. System.out.println(req.getParameter("username"));
  6. resp.getWriter().write("58期");
  7. }
  8. }

jquery的ajax操作

$.ajax()
  1. ![](https://g.yuque.com/gr/latex?.ajax()%E6%96%B9%E6%B3%95%E9%80%9A%E8%BF%87%20HTTP%20%E8%AF%B7%E6%B1%82%E5%8A%A0%E8%BD%BD%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE%E3%80%82%E8%AF%A5%E6%96%B9%E6%B3%95%E6%98%AF%20jQuery%20%E5%BA%95%E5%B1%82%20AJAX%20%E5%AE%9E%E7%8E%B0%E3%80%82#card=math&code=.ajax%28%29%E6%96%B9%E6%B3%95%E9%80%9A%E8%BF%87%20HTTP%20%E8%AF%B7%E6%B1%82%E5%8A%A0%E8%BD%BD%E8%BF%9C%E7%A8%8B%E6%95%B0%E6%8D%AE%E3%80%82%E8%AF%A5%E6%96%B9%E6%B3%95%E6%98%AF%20jQuery%20%E5%BA%95%E5%B1%82%20AJAX%20%E5%AE%9E%E7%8E%B0%E3%80%82&id=Sn2cR).ajax() 返回其创建的 XMLHttpRequest 对象。ajax() 方法用于执行 AJAX(异步 HTTP)请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
  1. $.ajax(options)
  1. 参数options为一个javascript对象,该对象的属性包含了$.ajax()方法所需要的请求设置及回调函数等信息,以键值对形式存在,所有属性都是可选的。

下面的表格中列出了可能的属性(加粗部分为常用,必须掌握):

名称 值/描述
async 布尔值,表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
contentType 发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”。
context 为所有 AJAX 相关的回调函数规定 “this” 值。
data 规定要发送到服务器的数据。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp 在一个 jsonp 中重写回调函数的字符串。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。
password 规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset 规定请求的字符集。
success(result,status,xhr) 当请求成功时运行的函数。
timeout 设置本地的请求超时时间(以毫秒计)。
traditional 布尔值,规定是否使用参数序列化的传统样式。
type 规定请求的类型(GET 或 POST)。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。

$.ajax.jsp

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>Title</title>
  5. <script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
  6. </head>
  7. <body>
  8. <form>
  9. <table border="1" cellpadding="0" cellspacing="0">
  10. <tr>
  11. <td>用户名</td>
  12. <td><input type="text" name="username" id="username"></td>
  13. <td></td>
  14. </tr>
  15. <tr>
  16. <td>密码</td>
  17. <td><input type="text" name="password" id="password"></td>
  18. <td></td>
  19. </tr>
  20. <tr>
  21. <td colspan="3"><input type="button" value="立即注册" id="btn"></td>
  22. </tr>
  23. </table>
  24. </form>
  25. <script>
  26. //需求:当用户名被输入完成后,失去光标时,则向后台发一次请求,验证当前用户名是否在数据库中存在
  27. //如果存在,在用户名的表单控件后的td中,给用户作出提示
  28. //onchange:表单控件内容发生了改变,并且失去了光标 onblur
  29. $(function () {
  30. $("#username").change(function () {
  31. //向后台发请求,并把当前控件的value值带过去。
  32. $.ajax({
  33. url:"/user.do",//url:请求提交的位置
  34. type:"GET", //type:请求提交的方式
  35. data:{username:$("#username").val()}, // data: 提交请求时附带的数据
  36. dataType:"text", //dataType:预期从服务器端返回的数据类型
  37. success:function (resp) {//resp就是封装了服务器响应回来的数据
  38. console.log(resp)
  39. $("#username").parent("td").next().html(resp)
  40. }
  41. })
  42. })
  43. })
  44. </script>
  45. </body>
  46. </html>

JavaWeb - 图13%E3%80%81#card=math&code=.get%28%29%E3%80%81&id=IaLvg).post()
  1. ![](https://g.yuque.com/gr/latex?.get()%20%E6%96%B9%E6%B3%95%E4%BD%BF%E7%94%A8%20HTTP%20GET%20%E8%AF%B7%E6%B1%82%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE%EF%BC%8C#card=math&code=.get%28%29%20%E6%96%B9%E6%B3%95%E4%BD%BF%E7%94%A8%20HTTP%20GET%20%E8%AF%B7%E6%B1%82%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE%EF%BC%8C&id=iwyN1).post() 方法使用 HTTP POST请求从服务器加载数据,这两个方法是在$.ajax()方法上做的封装,相当于直接固定了TYPE属性的值。
  1. $.get(URL,data,function(data,status,xhr),dataType)
参数 描述
URL 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。规定当请求成功时运行的函数。 额外的参数: data - 包含来自请求的结果数据status - 包含请求的状态(”success”、”notmodified”、”error”、”timeout”、”parsererror”)xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。 默认地,jQuery 会智能判断。 可能的类型:”xml” - 一个 XML 文档”html” - HTML 作为纯文本”text” - 纯文本字符串”script” - 以 JavaScript 运行响应,并以纯文本返回”json” - 以 JSON 运行响应,并以 JavaScript 对象返回”jsonp” - 使用 JSONP 加载一个 JSON 块,将添加一个 “?callback=?” 到 URL 来规定回调
  1. $.post("/user.do",{username:$(this).val(),method:"register"},function (resp) { console.log(resp) },"json")

$.getJson()
  1. $.getJson() 方法使用 HTTP GET请求从服务器加载数据,要求返回的值为JSON
  1. $.getJson(URL,data,function(data,status,xhr))
参数 描述
URL 必需。规定将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。规定当请求成功时运行的函数。 额外的参数: data - 包含来自请求的结果数据status - 包含请求的状态(”success”、”notmodified”、”error”、”timeout”、”parsererror”)xhr - 包含 XMLHttpRequest 对象
  1. $.getJSON("/user.do",{username:$(this).val(),method:"register"},function (resp) { console.log(resp) })

服务端响应JSON

1、导入fastJSON包

2、在程序中通过JSONObject对象的toJSONString()将对应的对象转换为json字符串。

  1. User user = new User("jack", "222");resp.getWriter().write(new JSONObject().toJSONString(user));

MD5加密

特点1:

对同一个值进行md5加密时,得到的结果永远是相同的。

111 ==> gajoajalemhlakeyraemk

特点2:

加密结果不可逆。

  1. package com.woniuxy.utils;import java.io.UnsupportedEncodingException;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;import java.util.Base64;public class CommonsUtil { public static String md5(String password) throws UnsupportedEncodingException, NoSuchAlgorithmException { MessageDigest md5 = MessageDigest.getInstance("MD5"); byte[] digest = md5.digest(password.getBytes("utf-8")); return Base64.getEncoder().encodeToString(digest); }}

五、项目相关功能

5.1、文件上传

  1. 开发人员可以使用Apache文件上传组件commons-fileupload来接收浏览器上传的文件,该组件由多个类共同组成,但是,对于使用该组件来编写文件上传功能的Java Web开发人员来说,只需要了解和使用以下三个类:
  • ServletFileUpload:Apache文件上传组件的核心类,应用程序开发人员通过这个类来与Apache文件上传组件进行交互。
  • FileItem:用来封装单个表单字段元素的数据,一个表单字段元素对应一个FileItem对象,通过调用FileItem对象的方法可以获得相关表单字段元素的数据。
  • FileUploadException:上传中产生的异常。

    1. 文件上传流程:
  1. 编写上传页面,form表单的enctype属性必须为”multipart/form-data”,提交方式必须为post;
  2. servlet中使用ServletFileUpload的isMultipartContent()判断请求消息中的内容是否是“multipart/form-data”类型,是则返回true,否则返回false。
  3. 返回结果为true,则基于DiskFileItemFactory工厂对象创建ServletFileUpload对象,并使用ServletFileUpload的parseRequest()解析请求,获取所有表单字段的数据集合List。
  4. 遍历数据集合,通过FileItem的isFormField()判断是否是普通表单字段,是则返回true,否则返回false(文件字段)。
  5. 如果FileItem是文件字段,使用FileItem的write()将文件写至指定存放地点即可。

    1. 在上传流程中,也可以使用ServletFileUpload的**setSizeMax**()设置上传文件大小,在上传操作完成后,一般会调用FileItem的**delete**()手动删除由于上传文件过大而产生的临时文件。

jsp

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>Title</title>
  5. </head>
  6. <body>
  7. <form action="/upload.do" method="post" enctype="multipart/form-data">
  8. 用户名:<input type="text" name="username" ><br>
  9. 密码:<input type="text" name="password" ><br>
  10. 头像:<input type="file" name="file" ><br>
  11. <input type="submit" value="立即注册">
  12. </form>
  13. </body>
  14. </html>

serlvet

  1. @WebServlet("/upload.do")
  2. public class UploadServlet extends HttpServlet {
  3. /**
  4. * 处理表单提交的数据
  5. * 如果有文件域,就应该做文件上传的相应处理。
  6. * @param req
  7. * @param resp
  8. * @throws ServletException
  9. * @throws IOException
  10. */
  11. @Override
  12. protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException{
  13. //先判断当前请求中是否存在文件上传
  14. boolean isMulti = ServletFileUpload.isMultipartContent(req);
  15. if (isMulti) {
  16. //做文件上传相应的处理
  17. try {
  18. //创建ServletFileUpload对象
  19. ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());
  20. //设置最大尺寸
  21. upload.setSizeMax(200*1024*1024);
  22. //解析请求,为第一个表单控件生成对应的fileItem对象
  23. List<FileItem> fileItems = upload.parseRequest(req);
  24. //fileItem的类型
  25. for (FileItem fileItem : fileItems) {
  26. if (fileItem.isFormField()) {
  27. String value = fileItem.getString("utf-8");
  28. System.out.println(value);
  29. }else{
  30. //执行上传操作
  31. //1、指定文件存储位置 文件服务器 文件系统下 web应用
  32. File target = new File("D:\\files");
  33. //2、处理文件的存储名称,解决同名文件被覆盖的问题
  34. String originName = fileItem.getName();
  35. String suffix = originName.substring(originName.lastIndexOf("."));
  36. String uploadFileName=UUID.randomUUID().toString().replace("-","")+System.currentTimeMillis()+ suffix;
  37. //生成要被上传的文件
  38. File uploadFile = new File(target, uploadFileName);
  39. fileItem.write(uploadFile);//上传
  40. }
  41. }
  42. } catch (Exception e) {
  43. e.printStackTrace();
  44. }
  45. }else{
  46. //如果不是,就进行普通的表单处理
  47. }
  48. }
  49. /**
  50. * 1、将前端设置好
  51. * form的method指定为post enctype指定为multipart/form-data
  52. * 在表单中提供文件域 <input type="file" name="file"/>
  53. * 2、在servlet中要去做的事情
  54. * 2.1 先判断是否是文件上传的请求 ServletFileUpload.isMultipartContent(req)
  55. * 2.2 返回值如果为true,表示是文件上传的请求,就需要解析请求:
  56. * 2.2.1 创建SevletFileUpload对象,使用带参构造创建,参数为DiskFileItemFactory对象
  57. * 2.2.2 设置上传请求的尺寸 upload.setSizeMax()
  58. * 2.2.3 解析请求 upload.parseRequest(req)
  59. * 2.2.4 遍历解析请求后返回的FileItem集合,使用isFormField()判断是否是文件字段(false)
  60. * 2.2.5 如果是文件字段,进行文件上传的处理 指定文件的存储路径 处理上传文件的存储名称 fileItem.write(file)完成上传。
  61. */
  62. }

5.2、javaMail

协议:SMTP(可发可收) POP3(发送) IMAP(接收)

javaMail,sun公司为了方便程序员进行邮件开发写的一套API

JavaWeb - 图14

程序开发中关心的是发送邮件的API,接收部分由邮件服务提供商进行处理。

要实现邮件发送,在程序中需要使用到三个javaMail的API类:Message(邮件),Session(定义环境),Transport(发送邮件)

javaMail开发实现

1、开发前的准备:

1.1注册邮箱帐号并登录

1.2点击设置,开启SMTP/POP3服务并保存授权密码

2、编写代码发送邮件

  1. public class CommonsUtil {
  2. public static void sendMail(String sender,String password,String reciver,String subject,Object mailMsg) throws MessagingException {
  3. //通过3个对象将邮件发送出去
  4. //session message transport
  5. //设置邮件发送的相关环境
  6. Properties props = new Properties();
  7. props.setProperty("mail.transport.protocol","SMTP");
  8. props.setProperty("mail.host","smtp.163.com");
  9. props.setProperty("mail.smtp.auth","true");
  10. Authenticator authenticator=new Authenticator() {
  11. @Override
  12. protected PasswordAuthentication getPasswordAuthentication() {
  13. return new PasswordAuthentication(sender,password);
  14. }
  15. };
  16. Session session = Session.getInstance(props,authenticator);
  17. //创建邮件对象,并设置邮件内容
  18. MimeMessage message = new MimeMessage(session);
  19. message.setContent(mailMsg,"text/html;charset=utf-8");//设置邮件的内容
  20. message.setSubject(subject);//设置邮件标题
  21. message.setRecipient(Message.RecipientType.TO,new InternetAddress(reciver));//设置收件人
  22. message.setFrom(new InternetAddress(sender));//设置发件人
  23. //发送邮件
  24. Transport.send(message);
  25. }
  26. }

javaMail在项目中的应用:

业务层

  1. public class UserServiceImpl implements UserService {
  2. private UserMapper userMapper;
  3. public UserServiceImpl(){
  4. userMapper= MybatisUtil.getMapper(UserMapper.class);
  5. }
  6. //注册成功后(即向数据库完成了新增),向用户在注册时提供的邮箱中发激活邮件
  7. @Override
  8. public boolean register(User user) throws MessagingException {
  9. int i = userMapper.insertUser(user);
  10. if (i>0) {
  11. //注册成功,向用户的邮箱中发送激活邮件
  12. CommonsUtil.sendMail("hjy15823115656@163.com",
  13. "ZTDHHXXGVZBYQXJO",
  14. user.getEmail(),
  15. "用户激活",
  16. "<a href='http://127.0.0.1:8080/user.do?method=active&activeCode="
  17. +user.getActiveCode()+"'>"+user.getActiveCode()+"</a>");
  18. return true;
  19. }
  20. return false;
  21. }
  22. //处理激活用户的业务,基于请求中传递的激活码进行数据库修改操作,将用户的状态修改为已激活
  23. @Override
  24. public boolean active(String activeCode) {
  25. int i=userMapper.updateUserByActiveCode(activeCode);
  26. if (i>0) {
  27. return true;
  28. }
  29. return false;
  30. }
  31. }

mapper层

  1. public interface UserMapper {
  2. @Insert("insert into t_user(name,password,email,activeCode) values(#{name},#{password},#{email},#{activeCode})")
  3. int insertUser(User user);
  4. @Update("update t_user set state=1 where activeCode=#{activeCode}")
  5. int updateUserByActiveCode(String activeCode);
  6. }

5.3、注册按钮

验证用户名和邮箱都没有被注册才移除注册按钮的disabled属性

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4. <title>Title</title>
  5. <script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
  6. </head>
  7. <body>
  8. <form action="/user.do" method="post">
  9. <table>
  10. <tr>
  11. <td>用户名</td>
  12. <td><input type="text" name="username" id="username"></td>
  13. <td></td>
  14. </tr>
  15. <tr>
  16. <td>密码</td>
  17. <td><input type="password" name="password"></td>
  18. <td></td>
  19. </tr>
  20. <tr>
  21. <td>电子邮箱</td>
  22. <td><input type="text" name="email" id="email"></td>
  23. <td></td>
  24. </tr>
  25. <tr>
  26. <td colspan="3">
  27. <input type="submit" id="register" disabled value="立即注册">
  28. <input type="hidden" name="method" value="register">
  29. </td>
  30. </tr>
  31. </table>
  32. </form>
  33. <script>
  34. $(function () {
  35. var checkUserName=false;
  36. var checkEmail=false;
  37. $("#username").change(function () {
  38. $.getJSON("/user.do",{username:$(this).val(),method:"checkUserName"},function (resp) {
  39. if (resp) {
  40. checkUserName=true;
  41. }else{
  42. checkUserName=false;
  43. }
  44. if (checkUserName & checkEmail) {
  45. $("#register").removeAttr("disabled")
  46. }else{
  47. $("#register").attr("disabled","disabled")
  48. }
  49. })
  50. })
  51. $("#email").change(function () {
  52. $.getJSON("/user.do",{email:$(this).val(),method:"checkEmail"},function (resp) {
  53. if (resp) {
  54. checkEmail=true;
  55. }else{
  56. checkEmail=false;
  57. }
  58. if (checkUserName & checkEmail) {
  59. $("#register").removeAttr("disabled")
  60. }else{
  61. $("#register").attr("disabled","disabled")
  62. }
  63. })
  64. })
  65. })
  66. </script>
  67. </body>
  68. </html>

5.4、相关代码

Category

  1. @Data
  2. public class Category {
  3. private Integer id;
  4. private String name;
  5. }

CategoryController

  1. @WebServlet("/category.do")
  2. public class CategoryController extends BaseServlet {
  3. public void findAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
  4. response.setContentType("text/html;charset=utf-8");
  5. List<Category> categories = new CategoryServiceImpl().findAll();
  6. response.getWriter().write(new JSONObject().toJSONString(categories));
  7. }
  8. }

CategoryServiceImpl

  1. public class CategoryServiceImpl implements CategoryService {
  2. private CategoryMapper categoryMapper;
  3. public CategoryServiceImpl(){
  4. categoryMapper= MyBatisUtil.getMapper(CategoryMapper.class);
  5. }
  6. @Override
  7. public List<Category> findAll() {
  8. return categoryMapper.findAll();
  9. }
  10. }

CategoryMapper

  1. public interface CategoryMapper {
  2. @Select("select * from t_category")
  3. List<Category> findAll();
  4. }

Goods

  1. @Data
  2. public class Goods {
  3. private Integer id;
  4. private String name;
  5. private Double price;
  6. private String image;
  7. private Integer cid;
  8. }

GoodsController

  1. /**
  2. * 处理商品相关的请求
  3. */
  4. @WebServlet("/goods.do")
  5. public class GoodsController extends BaseServlet {
  6. public void findGoodsByCid(HttpServletRequest request, HttpServletResponse response)
  7. throws IOException {
  8. response.setContentType("text/html;charset=utf-8");
  9. String cid = request.getParameter("cid");
  10. String pageNum = request.getParameter("pageNum");
  11. Integer num=null==pageNum?1:Integer.valueOf(pageNum);
  12. PageInfo<Goods> pageInfo=new GoodsServiceImpl().findGoodsByCid(num,Integer.valueOf(cid));
  13. response.getWriter().write(new JSONObject().toJSONString(pageInfo));
  14. }
  15. // /**
  16. // * 分页查询
  17. // * @param request
  18. // * @param response
  19. // */
  20. // public String page(HttpServletRequest request, HttpServletResponse response) throws IOException {
  21. // response.setContentType("text/html;charset=utf-8");
  22. // PageInfo<Goods> pageInfo = getPageInfo(request, response);
  23. //
  24. // HttpSession session = request.getSession();
  25. // //如果session不存在商品分类信息,就去查询数据库,得到对应的商品分类信息
  26. // if (null==session.getAttribute("categories")) {
  27. // List<Category> categories = new CategoryServiceImpl().findAll();
  28. // session.setAttribute("categories",categories);
  29. // }
  30. //
  31. // session.setAttribute("pageInfo",pageInfo);
  32. // return "r:/page/main.jsp";
  33. //// response.getWriter().write(new JSONObject().toJSONString(pageInfo));
  34. // }
  35. //
  36. // public void pageAjax(HttpServletRequest request, HttpServletResponse response) throws IOException {
  37. // response.setContentType("text/html;charset=utf-8");
  38. // response.getWriter().write(new JSONObject().toJSONString(getPageInfo(request,response)));
  39. // }
  40. //
  41. // public PageInfo<Goods> getPageInfo(HttpServletRequest request, HttpServletResponse response){
  42. // String number = request.getParameter("pageNum");
  43. // String size = request.getParameter("pageSize");
  44. // String cid = request.getParameter("cid");
  45. // Integer pageNum = null== number ?1:Integer.valueOf(number);
  46. // Integer pageSize = null== size ?5:Integer.valueOf(size);
  47. // Integer id=null==cid?1:Integer.valueOf(cid);
  48. // PageInfo<Goods> pageInfo=new GoodsServiceImpl().findByPage(pageNum,pageSize,id);
  49. // return pageInfo;
  50. // }
  51. //
  52. // public String getGoodsById(HttpServletRequest request, HttpServletResponse response){
  53. //
  54. // String id = request.getParameter("id");
  55. //
  56. // Goods goods=new GoodsServiceImpl().findById(Integer.valueOf(id));
  57. //
  58. // request.getSession().setAttribute("goods",goods);
  59. //
  60. // return "r:/page/goodsInfo.jsp";
  61. // }
  62. }

GoodsServiceImpl

  1. public class GoodsServiceImpl implements GoodsService {
  2. private GoodsMapper goodsMapper;
  3. public GoodsServiceImpl(){
  4. goodsMapper = MyBatisUtil.getMapper(GoodsMapper.class);
  5. }
  6. @Override
  7. public PageInfo<Goods> findByPage(Integer pageNum,Integer pageSize,Integer cid) {
  8. PageHelper.startPage(pageNum, pageSize);
  9. List<Goods> goodsList = goodsMapper.findAll(cid);
  10. PageInfo<Goods> pageInfo = new PageInfo<>(goodsList);
  11. return pageInfo;
  12. }
  13. @Override
  14. public Goods findById(Integer id) {
  15. return goodsMapper.findById(id);
  16. }
  17. @Override
  18. public PageInfo<Goods> findGoodsByCid(Integer pageNum,Integer cid) {
  19. PageHelper.startPage(pageNum,3);
  20. List<Goods> goodsList = goodsMapper.findGoodsByCid(cid);
  21. PageInfo<Goods> pageInfo = new PageInfo<>(goodsList);
  22. return pageInfo;
  23. }
  24. }

GoodsMapper

  1. public interface GoodsMapper {
  2. @Select("select * from t_goods where cid=#{cid}")
  3. List<Goods> findAll(Integer cid);
  4. @Select("select * from t_goods where id=#{id}")
  5. Goods findById(Integer id);
  6. @Select("select * from t_goods where cid=#{cid}")
  7. List<Goods> findGoodsByCid(Integer cid);
  8. }

main.jsp

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <html>
  4. <head>
  5. <title>Title</title>
  6. <script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
  7. <style>
  8. *{
  9. margin: 0;
  10. padding: 0;
  11. }
  12. li{
  13. list-style: none;
  14. width: 80px;
  15. height: 160px;
  16. border: 1px solid black;
  17. float: left;
  18. margin-left: 20px;
  19. }
  20. ul:after{
  21. content: '';
  22. display: block;
  23. clear: both;
  24. }
  25. #categories>li{
  26. width: 120px;
  27. height: 60px;
  28. border: 1px solid black;
  29. float: left;
  30. margin-left: 50px;
  31. text-align: center;
  32. line-height: 60px;
  33. }
  34. #categories{
  35. width:516px;
  36. height: 62px;
  37. margin: 0 auto;
  38. }
  39. #categories:after{
  40. content: '';
  41. display: block;
  42. clear: both;
  43. }
  44. #goodsList>div{
  45. width: 150px;
  46. height: 240px;
  47. border: 1px solid black;
  48. margin-left: 20px;
  49. float: left;
  50. }
  51. #goodsList:after{
  52. content: '';
  53. display: block;
  54. clear: both;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <%--展示商品大类信息--%>
  60. <div id="categories"></div>
  61. <hr>
  62. <div id="goodsList"></div>
  63. <div id="pagequery"></div>
  64. <script>
  65. $(function () {
  66. //页面加载完成,查询到商品大类信息并将之渲染到页面中
  67. $.getJSON("/category.do",{method:"findAll"},function (resp) {
  68. var $categories = $("#categories");
  69. for(var i=0;i<resp.length;i++){
  70. //resp[i] --->category{id,name
  71. }
  72. var $div = $("<div cid='"+resp[i].id+"'>"+resp[i].name+"</div>");
  73. $div.click(function () {
  74. var cid = $(this).attr("cid");
  75. //查询对应商品大类的商品信息
  76. $.getJSON("/goods.do",{method:"findGoodsByCid",cid:cid},function (resp) {
  77. var $goodsList = $("#goodsList");
  78. var $pagequery = $("#pagequery");
  79. $goodsList.html("")
  80. $pagequery.html("")
  81. for (var j=0;j<resp.list.length;j++){
  82. var $goodsInfoDiv = $("<div><img src='/"+resp.list[j].image+"'width='150' height='200'/><p>"+resp.list[j].name+"</p><p>"+resp.list[j].price+"</p></div>");
  83. $goodsList.append($goodsInfoDiv)
  84. }
  85. for (var k=1;k<=resp.pages;k++){
  86. var $pageNum = $("<div pageNum='"+k+"' style='width: 20px;height: 20px;border: 1px solid black;border-radius: 50%;'>"+k+"</div>");
  87. $pageNum.click(function () {
  88. var pageNum = $(this).attr("pageNum");
  89. $.getJSON("/goods.do",{method:"findGoodsByCid",pageNum:pageNum,cid:resp.list[0].cid},function (resp) {
  90. var $goodsList = $("#goodsList");
  91. $goodsList.html("")
  92. for (var j=0;j<resp.list.length;j++){
  93. var $goodsInfoDiv = $("<div><img src='/"+resp.list[j].image+"'width='150' height='200'/><p>"+resp.list[j].name+"</p><p>"+resp.list[j].price+"</p></div>");
  94. $goodsList.append($goodsInfoDiv)
  95. }
  96. })
  97. })
  98. $pagequery.append($pageNum)
  99. }
  100. })
  101. })
  102. $categories.append($div);
  103. }
  104. })
  105. // $("#categories>li").click(function () {
  106. // var cid = $(this).attr("cid");
  107. // $.getJSON("/goods.do",{method:"pageAjax",cid:cid},function (resp) {
  108. // console.log(resp)
  109. // var $goods = $("#goods");
  110. // $goods.html("");
  111. // for (var i=0;i<resp.list.length;i++){
  112. // $goods.append("<li>" +
  113. // " <img src='/"+resp.list[i].image+"' width='78' height='140'/>" +
  114. // " <p>"+resp.list[i].name+"</p>\n" +
  115. // " <p>"+resp.list[i].price+"</p>\n" + // " </li>")
  116. // }
  117. // })
  118. // }) })
  119. </script>
  120. <%--展示某一个商品大类对应的商品信息--%>
  121. <ul id="goods">
  122. <c:forEach items="${pageInfo.list}" var="goods" begin="0" end="${pageInfo.list.size()}">
  123. <li>
  124. <%-- <a href="/goods.do?method=getGoodsById&id=${goods.id}">--%>
  125. <img class="goodsImg" gid="${goods.id}" src="/${goods.image}" width="78" height="140"/>
  126. <%-- </a>--%>
  127. <p>${goods.name}</p>
  128. <p>${goods.price}</p>
  129. </li>
  130. </c:forEach>
  131. </ul>
  132. <script>
  133. $(function () {
  134. $(".goodsImg").click(function () {
  135. //sessionStorage.setItem("id",$(this).attr("gid"));//html5 web存储
  136. location.href="goodsInfo.jsp?id="+$(this).attr("gid")
  137. })
  138. })
  139. </script>
  140. <%-- <div id="content"></div>--%>
  141. <%-- <div id="div"></div>--%><%--<script>--%>
  142. <%-- // $(function () {--%>
  143. <%-- //页面加载完成,向后台发送请求:查询商品信息--%>
  144. <%-- // $.getJSON("/goods.do",{method:"page"},function (resp) {--%>
  145. <%-- // console.log(resp)--%>
  146. <%-- // var $content = $("#content");--%>
  147. <%-- // for (var i=0;i<resp.list.length;i++) {--%>
  148. <%-- // $content.append("<span>"+resp.list[i].name+"</span>")--%>
  149. <%-- // }--%>
  150. <%-- // for (var j=0;j<resp.pages;j++) {--%>
  151. <%-- // var $input = $("<input class='pageIndex' type='button' value='"+(j+1)+"'/>");--%>
  152. <%-- // $input.click(function () {--%>
  153. <%-- // var pageNum = $(this).val();--%>
  154. <%-- // $.getJSON("/goods.do",{method:"page",pageNum:pageNum},function (resp) {--%>
  155. <%-- // console.log(resp)--%>
  156. <%-- // })--%>
  157. <%-- // })--%>
  158. <%-- // $("#div").append($input)--%>
  159. <%-- // }--%>
  160. <%-- // });--%>
  161. <%-- // })--%>
  162. <%--</script>--%>
  163. </body>
  164. </html>