首页 > 编程语言 >javaweb6

javaweb6

时间:2022-12-13 20:37:20浏览次数:85  
标签:请求 对象 标签 Ajax 格式 javaweb6 new

3.EL表达式

3.1介绍

  • Expression Language表达式语言,应用于JSP页面,可以更简单、便捷的获取page、request. session, application等作用于的值,进行渲染。等作用于的值,进行渲染.

3.2应用

  1. 创建实体类

    package EL.Text1;
    
    public class Book {
        private String name;
        private String id;
    
        public Book() {
        }
    
        public Book(String name, String id) {
            this.name = name;
            this.id = id;
        }
    	//getset有参无参tostring
    }
    
  2. 创建servlet

      @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //传递数据
            //简单类型
            req.setAttribute("key1","123");
            //字符串类型
            req.setAttribute("key2","Hello EL");
            //对象
            req.setAttribute("key3",new Book("java","001"));
            //数组
            String arr[] = {"aaa","bbb","ccc"};
            req.setAttribute("key4",arr);
            //集合
            List<Book> list = new ArrayList<>();
            list.add(new Book("java","001"));
            list.add(new Book("c++","002"));
            list.add(new Book("python","003"));
            req.setAttribute("key5",list);
            //Map
            Map<String,Book> map = new HashMap<>();
            map.put("001",new Book("java","001"));
            map.put("002",new Book("c++","002"));
            map.put("003",new Book("python","003"));
            req.setAttribute("key6",map);
    req.getRequestDispatcher("text.jsp").forward(req,resp);
        }
    }
    
  3. 创建jsp文件接收数据

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>EL表达式应用</title>
    </head>
    <body>
        <%--EL表达式获取数据--%>
        <%--简单类型和字符串都是直接输入key即可--%>
        简单类型: ${key1} <br>
        字符串: ${key2} <br>
        <%--对象需要在key的后面.对象属性名(实例体必须提供set和get方法)--%>
        对象: ${key3.name} ${key3.id} <br>
        <%--数组需要在key后面加上索引,key[索引]--%>
        数组: ${key4[0]} ${key4[1]}<br>
        <%--集合需要在key后面加上索引(获取整个集合,key[索引] --%>
        集合: ${key5[0]}<br>
        <%--如果需要获取到具体的值,需要在后面.对象属性名--%>
        ${key5[1].name} ${key5[1].id}<br>
        <%--Map获取整个集合的值,直接key即可--%>
        Map: ${key6} <br>
        <%--Map获取具体的key(Map中的key)值,key[Map中的key],
        key.Map中的key都可以(这种方式数字类型时不可用--%>
        Map: ${key6['001']} <br>
        <%--Map获取具体key中的具体值,key[Map中的key].对象属性名--%>
        Map: ${key6['001'].name} <br>
    </body>
    </html>
    

3.3EL访问域对象

  1. 如果从servlet分别使用request,session,application同时向JSP页面传递数据,并且key都相同;

  2. 那么在JSP页面中直接使用${key}获取的是什么数据呢?

    1. 四个域对象的访问从小到大依次是
      • pageContext->request->session->application
    2. 如果没有指定域对象,${key}默认获取最小域对象中的数据
  3. 又如何能够获取到我们想要访问的域对象中的数据呢?

    1. 在EL表达式中,分别为四个域对象各自取了一个名字

      1. pageContext->pageScope
      2. request->requestScope
      3. session->sessionScope
      4. application->applicationScope
    2. 在JSP中如果多个打游戏都有相同的key,可以通过${***Scope.key}来获取指定域对象中的数据,如果获取不到则返回"",显示到页面为空白

      例 ${sessionScope.key}
      

3.3隐式对象

  • EL语法中提供的隐式对象称为隐式对象
隐式对象 描述
param 获取request对象的参数,返回值为String,${param.key}等价于request.getParameter("key")
paramValues 获取request对象的参数值,返回值为字符串集合,${paramValues}等价于request.getParameterValues()
header 获取HTTP请求头,$header.contentPosition}
headerValues 获取请求体中所有的值
initParam 获取上下文初始化参数
pageContext 获取当前页面的pageContext对象, $pageContext.request.contextPath)当前web项目在服务器的访问路径
cookie 获取cookie的值, ${cookie.usemame}

3.4运算符

  • EL表达式不仅能够从域对象获取数据,还可以对取出的数据进行算术运算,关系比较,逻辑运算等
  • 没说就是和java运算符基本相同

3.4.1算术运算符

/ div
% mod**** 取余

3.4.2逻辑运算符

== eq 等于
!= ne 不等于
> gt 大于
< lt 小于
>= ge 大于等于
<= le 小于等于

3.4.3其他

  • 判断是否为空empty
    • 使用:${empty key}

4.JSTL

4.1介绍

  1. JSTL(JSP Standard Tag Library),JSP标准标签库,用于扩展JSP中的标签,能够为JSP页面提供流程控制,类型转换等功能的标签.
  2. 在JSP中通常是JSTL+EL的组合来进行数据的提取及渲染
  3. JSTL标签库提供了多类标签,下面两个是常用的
    1. c: 核心标签库,提供流程控制的标签
    2. fmt: 转换表情包,提供了日期,数值类型转换的标签

4.2使用

  • 需要在JSTL中引用JSTL标签库之后,才可以使用JSTL提供的标签
  1. 下载JSTL标签库的依赖jar

    1. 打开一个网站maven仓库(https://mvnrepository.com/)

    2. 在搜索栏输入JSTL

    3. 选择第二个(javax.servlet>>jstl)image-20221210114207903

    4. 点击进去,选择版本

      image-20221210114349287

    5. 选择jar包,点击下载

      image-20221210114424451

  2. 下载依赖库

    1. 打开maven仓库

    2. 搜索框输入standard

    3. 选择taglibs>>standard这个

      image-20221210114649445

    4. 选择版本

      image-20221210114722430

    5. 选择jar,点击下载image-20221210114742455

  3. 将jar包导入到web项目中,并且添加到项目中

  4. 在需要使用JSTL标签的JSP文件中,通过<%@taglib>引入JSTL标签库

    <!-- 核心标签库引入 -->
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    <!-- 转换标签库引入 -->
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    

4.3核心标签库

  • c标签: 主要用于完成JSP页面中逻辑控制,流程控制

4.3.1c:if

  • 判断语句:语法
    <c:if text="LE表达式">
    	通过时执行的代码
    </c:if>
    
    <c:if test="${score} >= 60">
       <%--判断通过则执行--%>
       <label style="color: red">通过</label>
    </c:if>
    

4.3.2c:choose

  • 选择语句:语法(相当于java中的switch)
    <c:choose>
        <c:when test="EL表达式1">通过时执行的代码</c:when>
        <c:when test="EL表达式2">通过时执行的代码</c:when>
        <c:when test="EL表达式3">通过时执行的代码</c:when>
        <c:when test="EL表达式4">通过时执行的代码</c:when>
        <c:otherwise>
            以上代码都不执行时执行这条这句语句
        </c:otherwise>
    </c:choose>
    
    <c:choose>
        <c:when test="${score} >= 90">优秀</c:when>
        <c:when test="${score} >= 80">合格</c:when>
        <c:when test="${score} >= 70">良好</c:when>
        <c:when test="${score} >= 60">及格</c:when>
        <c:otherwise>
            <c:when test="${score} <60">别读了</c:when>
        </c:otherwise>
    </c:choose>
    

4.3.2c:foeEach

  • 迭代器:语法
    <c:forEach item="循环的对象" var="每获取一次得到的对象" begin="从集合中的哪个索引开始,0表示第一个" end="最多取到哪个索引" step="跨度为几(+几)">
    	执行的代码
    </c:forEach>
    

4.4转换标签库

4.4.1数字

  • 保留小数位
    pattern:自定义格式
    <fmt:formatNumber value="数字" pattern="#.要保留几位(00表示两位)"></fmt:formatNubmer>
    类型
    <fmt:formatNumber value="数字" type="currency(货币)"></fmt:formatNubmer>
    类型
    <fmt:formatNumber value="数字" type="percent(百分比"></fmt:formatNubmer>
    

4.4.2日期

  • pattern:自定义格式
    年月日:yyyy-MM-dd
    时分秒:hh:mm:ss
    <fmt:formatNumber value="时间" pattern="yyyy-MM-dd"></fmt:formatNubmer>
    

5.AJAX

5.1介绍

  • AJAX(Asynchronous JavaScript And XML)异步JS与XM(前端与后端的异步数据交互技术)L,指的是在网页使用JS脚本实现前端与服务器的异步交互技术
  • 在不刷新前端网页的前提下实现和服务器的请求与响应

5.2应用

5.2.1AJAX对象创建

  1. 判断浏览器的内核

    window.XMLHttpRequest
    为真就是新版本的浏览器,反之就是旧版本的浏览器
    
  2. 创建AJAX对象

    1. 新版本的浏览器:IE7+,FF,O,Safari,Chrome
    var 对象名 = XMLHttpRequest();
    
    1. 旧版本的浏览器:IE6,IE5
    var 对象名 = new ActiveXObject("Microsoft.XMLHTTP");
    

5.2.2封装Ajax请求数据

  1. open(method,url,asyn)

    1. method:异步请求的请求方式
    2. url:异步请求的请求目标路径
    3. asyn:是否为异步
  2. 请求方式

    1. GET:可以通过url传递参数

      url?携带的参数对象名=传递的参数
      
    2. POST:可以通过url传递参数

    3. POST:还可以在封装请求数据时不设置参数,在发送请求时,使用请求正文传递参数

      Ajax对象名.send(携带的参数对象名=传递的参数)
      

5.2.3状态

  1. Ajax请求对象是有状态的,不同的状态值表示异步交互的不同阶段

    //获取状态值
    ajax对象名.readyState
    
  2. 每种对象代表什么

    //创建Ajax对象,但未完成初始化(封装)
    ajax对象名.readyState==0
    //Ajax数据封装,但是未发送请求
    ajax对象名.readyState==1
    //Ajax发送请求并到达服务器
    ajax对象名.readyState==2
    //Ajax到达服务器,并且正在处理请求
    ajax对象名.readyState==3
    //Ajax处理请求完成,并且Ajax对象获取响应结果
    ajax对象名.readyState==4
    
  3. 状态值每变更一次,回调函数就会执行一次

5.3实现

5.3.1流程图

image-20221212193915349

5.3.2案例实现

  1. 创建web项目
  2. 新建一个注册页面
  3. 新建检测注册页面servlet类
  4. 新建一个js类

5.3.3代码实现

  1. 在注册页面中引入js类,并且编写检查等显示代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>注册页面</title>
        <%--引入js类--%>
        <script type="text/javascript" src="js/test.js"></script>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="" method="post">
            <%--将用户输入的数据传递给js类进行处理,并且接收返回的结果进行显示--%>
            <p>账户: <input type="text" id="userName"><label id="tips"></label>
                <%--给检测按钮添加一个点击事件--%>
                <input type="button" value="检测" onclick="checkUserName()">
            </p>
            <p>密码: <input type="password"></p>
            <p>确认密码: <input type="password"></p>
            <p>姓名: <input type="text"></p>
            <p>电话: <input type="text"></p>
            <p><input type="submit" value="提交"></p>
        </form>
    </body>
    </html>
    
  2. 在js类中发送请求,让servlet类查询数据库是否已经存在该用户名

    /*定义一个事件*/
    function checkUserName(){
        /*发送异步请求给servlet类,并将用户名传递过去*/
        //1.创建Ajax对象
        var ajaxReq;
        //判断浏览器的内核是新版本还是旧版本的
        if(window.XMLHttpRequest){
            //为真就是新版本的
            ajaxReq = new XMLHttpRequest();
        }else {
            //为假就是旧版本的
            ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.封装Ajax请求数据
        var userName = document.getElementById("userName");
        ajaxReq.open("GET","CheckUserNameServlet?userName="+userName,true);
        //3.指定Ajax请求的回调函数(请求结果传递回来后我要如何处理)
        //状态值每变更一次,回调函数就会执行一次
        ajaxReq.onreadystatechange = function (){
            /*获取服务器响应结果的两个条件:
            1.异步请求完成(状态值为4)
            2.http状态为200:Ajax对象名.status==20
             */
            if((ajaxReq.readyState==4)&&(ajaxReq.status==200)){
                /*获取结果:
                如果服务器响应的文本数据是字符串(文本数据)则使用:responseText接收
                如果服务器响应的是XML文件,则使用:responseXML接收
                 */
                var result = ajaxReq.responseText;
                //将结果返回给jsp进行显示
                document.getElementById(tips).innerHTML=result;
            }
        }
        //4.发送请求
        //因为是GET请求,所以参数填null
        ajaxReq.send(null);
    
    }
    
  3. 在servlet类中接收数据,查询数据库是否已经存在该用户名,并且响应结果给js类

        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //接收用户名
            String userName = req.getParameter("userName");
            //2.检查用户名是否存在(查询数据库进行匹配)
            //伪代码:当前练习只要不以admin开头就可以使用
            boolean b = !userName.startsWith("admin");
            String str = b?("<label style='color:green'>用户名可用</label>"):("<label style='color:red'>用户名不可用</label>");
            //3.通过response的输出流响应ajax请求
            resp.setCharacterEncoding("utf-8");
            PrintWriter out = resp.getWriter();
            out.println(str);
            //关闭和刷新流
            out.flush();
            out.close();
        }
    

6.JSON

6.1介绍

  • 一种数据交互所共同遵守的数据格式

6.2格式

  • 转换格式

    • 对象和Map转换成{key:value , key:value....}
    • 数组和集合转换成[e1,e2,e3....]
    • JSON格式可以嵌套

    image-20221213185025547

6.3格式转换

6.3.1JS对象与JSON格式转换

  • JS对象转换为JSON格式字符串

    //格式
    JSON.stringify(要转换的js对象);
    //例:创建js对象
    var obj = {key1:"1001",key2:"张三"};
    //转换为JSON格式
    JSON.stringify(obj);
    
  • JSON格式字符串转换为JS对象

    //格式
    eval = ("("+要转换的json对象+")");
    //例:创建json对象
    var obj = {"key1":"1001","key2":"张三"};
    //转换为js格式
    eval = ("("+obj+")");
    

6.3.2java对象与JSON格式转换

  1. json对象转化为java对象

    • 下载GSON的jar包,然后导入到web项目中,下载方式,将搜索的对象改为GSON即可

      //创建Gson对象格式
      Gson 对象名 = new  Gson();
      //将json对象转为java对象
      对象名.fromJson(要转换的对象名,要转换的对象类型.class);
      //例:创建Gson对象
      Gson gson = new  Gson();
      //将json对象转为java对象
      gson.fromJson(str,student.class);
      
  2. java对象转化为json对象

    //格式
    gson对象名.toJson(要转换的对象名);
    //例:创建java对象
    Student stu = new Student("1001","张三");
    //将java对象转化为json对象
    gson.toJson(stu);
    

标签:请求,对象,标签,Ajax,格式,javaweb6,new
From: https://www.cnblogs.com/Myvlog/p/16980525.html

相关文章