黑马程序员javaweb之Filter&AJAX&JSON

Filter

1.概述&快速入门案例

 

放行前，对request进行处理，因为要先读到jsp里面提交的表单

放行后，才会对response进行处理，设置响应数据，然后返回

 2.Filter使用细节

注意后缀名拦截只有：“*.jsp”     前面没有/ 

注意这里的过滤器链，先全部走完，访问资源，再回去。还是很妙的 

3.案例：登录页面 

我们之前的代码，把登录成功的对象存储到session中了。所以根据session中有没有对象，就能判断有没有登录了。

Filter在web包下，因为和servlet,lister时javaweb三件套.

意思就是不管你浏览器调页面，首先要先通过过滤器，要是不放行你就访问不了.

要让css页面样式能通过

Listener 

 

这一节没有怎么讲监听器，会创建就好了。具体用法会在Spring里面说

AJAX

1.概述

 

简单来说就是对于浏览器来说，同步是连续的，异步是不连续的。同步的请求，会立刻显现在浏览器上，而异步的，浏览器不会有任何变化。

总结：
1.可以用ajax和html来替换jsp

2.可以达到异步的效果。就是不刷新当前页面，起到一个局部刷新的作用

2.AJAX快速入门

创建一个AjaxServlet来用response进行响应数据

前端：javascript要写到html里面

 

第一步和第三步都是固定的

就第二步的 有点变化。注意要写绝对路径

    //2. 发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();

第三步中,this.responseText就是获取servlet响应的数据。

怎么往response里面写数据？

  response.getWriter().write("hello ajax~");

 AXIOS

就是对Ajax的封装

第一种调用方法：

 主要是get和post数据放置位置的区别

get主要就是放在url后面，加上?后面跟着键值对

post直接写在js里面，用data:    然后""里面写键值对，用=连接

  //1. get
    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })


    //2. post
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })

第二种方法： 

  axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function(resp){
        alert(resp.data);
    })

    axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function(resp){
        alert(resp.data);
    })

JSON 

1.json的概述

作为数据载体，在网络中进行数据传输。和js的格式很类似，但是要字符串要用""，无论键还是值

  var json={
    "name":"zhangsan",
    "age":13,
    "people":["上海","北京"]
  };
  alert(json.people);

啊我才发现idea里面的html可以直接从右上角点进去浏览器！！！！！！！

2.JSON对象和JSON数据的转换

 

 1.导入坐标

       <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

2.java对象转换成字符串

先创建一个对象，set好数据信息，然后调用JSON.toJSONString(user)即可

        //1. 将Java对象转为JSON字符串
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPassword("123");

        String s = JSON.toJSONString(user);
        System.out.println(s);

3.将字符串转换为java对象。用到JSON.parseObject("",USER.class)    第一个写字符串，第二个写要转换的java类型

        //2. 将JSON字符串转为Java对象
        User user1 = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
        System.out.println(user1);

案例

查询所有

先从html发送请求，获取异步数据，到servlet，调用service 查询，将list集合转化为json，响应json数据，再到html，显示表格

注意这里当我把selectAllServlet写好之后

 //1. 调用Service查询
        System.out.println("*******");
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);

 这里当我们刷新访问的时候，可能会报错数据库。如果不是密码错误等低级错误，可能是mysql的版本问题。改成8.0.32就行了

   <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.32</version>
        </dependency>

写好Servlet后来写html，注意要把axios引入

然后这么写

<script>
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            alert("hhhhhhh");
            let brands = resp.data;
            let tableData = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";

            for (let i = 0; i < brands.length ; i++) {
                let brand = brands[i];

                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }




</script>

可能一开始还是会显示静态网页。重启一下idea就好了

新增品牌

先在html里面1.发送请求   2.收到响应，判断是不是成功，成功的话怎么怎么样

再在servlet，只能用字节流获取数据，因为如果用request.getParameter().是用字符来分割的，不能用来处理json语句；再把json字符串转换为java对象；再调用service.add()方法 ; 响应response.getWriter().write("success")

  // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();

        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //2. 调用service 添加
        brandService.add(brand);

        //3. 响应成功标识
        response.getWriter().write("success");

exception

com.alibaba.fastjson.JSONException: write javaBean error, fastjson version 1.2.62, class com.itheima.pojo.Brand, fieldName : 4

以上的报错可能是因为数据库中有null。

注意注意注意注意：如果一直打开html是静态，可能是因为从idea里面点进去的，要从新的浏览器点进去要不然不是动态！！！！！！！！！！我改了一个晚上！！！！！！！！