• day17学习总结

    一、json

    简介：

            json是一个轻量级数据交换格式   主要用于前后端数据传输

            json传输效率比较高  便于解析

            json就是一个特殊的字符串  这个字符串有固定的格式

    语法：

            对象：{} ===> 表示是对象 例如:{"uid":10,"uname":"张三"}        

            数组：[] ===> 表示是数组 例如:[{"uid":10,"uname":"张三"},{"uid":11,"uname":"李 四"} ]

     对象嵌套数组 或者是数组嵌套对象 ：

            A.对象中嵌套数组 {"employees": [{ "firstName":"Bill" , "lastName":"Gates" }]}

            B.数组中嵌套对象 [{date: "Sep 18 2016", music: { title: "夜夜夜夜-齐秦"}}]

    注意点：

            A.json是以键值对来进行存储

            B.json中每一个属性与属性值都是以冒号分割

            C.json中每一个组属性值都是以逗号分割

    参考网站：https://www.sojson.com/json2entity.html

    fastJson解析：

            

    1. package com.qf.test;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4. import com.qf.entity.Books;
    5. import com.qf.entity.Person;
    6. import com.qf.entity.Student;
    7.  
    8. import java.util.ArrayList;
    9. import java.util.List;
    10.  
    11. public class Test01 {
    12.     public static void main(String[] args) {
    13.  
    14.         //实例化学生对象
    15.         Student stu  = new Student(1001,"张珊","123456");
    16.         //将学生对象转换为json串
    17.         String s = JSON.toJSONString(stu);
    18.         System.out.println(s);
    19.         //将json串解析为Student对象
    20.         Student student = JSON.parseObject(s, Student.class);
    21.         System.out.println(student);
    22.  
    23.         //实例化集合
    24.         List list = new ArrayList<>();
    25.         //添加元素
    26.         list.add(new Student(1002,"李思","123"));
    27.         list.add(new Student(1003,"王舞","1223"));
    28.         list.add(new Student(1004,"赵柳","1244"));
    29.         //将集合转换为json串
    30.         String s1 = JSON.toJSONString(list);
    31.         System.out.println(s1);
    32.         //将json串解析为集合
    33.         List list1 = JSON.parseArray(s1, Student.class);
    34.         System.out.println(list1);
    35.  
    36.         String json1 = "{'name':'huochai','age':29,'school':{'name':'iankeyuan','location':'beijing'}}";
    37.         Person person = JSON.parseObject(json1, Person.class);
    38.         System.out.println(person);
    39.  
    40.         String json2 = "[\n" +
    41.                 "    {\n" +
    42.                 "        date: \"Sep 18 2016\",\n" +
    43.                 "        title: \"御剑飞仙翱于九天\",\n" +
    44.                 "        imgSrc: \"/images/post/crab.png\",\n" +
    45.                 "        avatar: \"/images/avatar/1.png\",\n" +
    46.                 "        content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
    47.                 "        reading: \"112\",\n" +
    48.                 "        collection: \"96\",\n" +
    49.                 "        headImgSrc: \"/images/post/crab.png\",\n" +
    50.                 "        author: \"林白衣\",\n" +
    51.                 "        dateTime: \"24小时前\",\n" +
    52.                 "        detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
    53.                 "        postId: 0,\n" +
    54.                 "        music: {\n" +
    55.                 "            url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
    56.                 "            title: \"夜夜夜夜-齐秦\",\n" +
    57.                 "            coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
    58.                 "        }\n" +
    59.                 "    },\n" +
    60.                 "\n" +
    61.                 "{\n" +
    62.                 "        date: \"Sep 18 2016\",\n" +
    63.                 "        title: \"御剑飞仙翱于九天\",\n" +
    64.                 "        imgSrc: \"/images/post/crab.png\",\n" +
    65.                 "        avatar: \"/images/avatar/1.png\",\n" +
    66.                 "        content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
    67.                 "        reading: \"112\",\n" +
    68.                 "        collection: \"96\",\n" +
    69.                 "        headImgSrc: \"/images/post/crab.png\",\n" +
    70.                 "        author: \"林白衣\",\n" +
    71.                 "        dateTime: \"24小时前\",\n" +
    72.                 "        detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
    73.                 "        postId: 0,\n" +
    74.                 "        music: {\n" +
    75.                 "            url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
    76.                 "            title: \"夜夜夜夜-齐秦\",\n" +
    77.                 "            coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
    78.                 "        }\n" +
    79.                 "    }\n" +
    80.                 "\n" +
    81.                 "  \n" +
    82.                 "    \n" +
    83.                 "]";
    84.         List books = JSON.parseArray(json2, Books.class);
    85.         for (Books b :books) {
    86.             System.out.println(b);
    87.  
    88.         }
    89.  
    90.  
    91.  
    92.  
    93.     }
    94. }

    gson 解析：

    1. package com.qf.test;
    2.  
    3. import com.google.gson.Gson;
    4. import com.google.gson.reflect.TypeToken;
    5. import com.qf.entity.Books;
    6. import com.qf.entity.Student;
    7.  
    8. import java.util.ArrayList;
    9. import java.util.List;
    10.  
    11. public class Test02 {
    12.     public static void main(String[] args) {
    13.         //实例化Gson对象
    14.         Gson g = new Gson();
    15.         Student student = new Student(1001,"张珊","123456");
    16.         //将对象转换为json串
    17.         String s = g.toJson(student);
    18.         System.out.println(s);
    19.         //将json串解析为对象\
    20.         Student student1 = g.fromJson(s, Student.class);
    21.         System.out.println(student);
    22.  
    23.         List list = new ArrayList<>();
    24.         list.add(new Student(1002,"李思","123"));
    25.         list.add(new Student(1003,"王舞","123"));
    26.         list.add(new Student(1004,"赵柳","123"));
    27.         list.add(new Student(1005,"孙琦","123"));
    28.         //将集合转换为json串
    29.         String s1 = g.toJson(list);
    30.         System.out.println(s1);
    31.         //将json串解析为集合
    32.         List list1=g.fromJson(s1,new TypeToken>(){}.getType());
    33.         System.out.println(list1);
    34.  
    35.         String json2 = "[\n" +
    36.                 "    {\n" +
    37.                 "        date: \"Sep 18 2016\",\n" +
    38.                 "        title: \"御剑飞仙翱于九天\",\n" +
    39.                 "        imgSrc: \"/images/post/crab.png\",\n" +
    40.                 "        avatar: \"/images/avatar/1.png\",\n" +
    41.                 "        content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
    42.                 "        reading: \"112\",\n" +
    43.                 "        collection: \"96\",\n" +
    44.                 "        headImgSrc: \"/images/post/crab.png\",\n" +
    45.                 "        author: \"林白衣\",\n" +
    46.                 "        dateTime: \"24小时前\",\n" +
    47.                 "        detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
    48.                 "        postId: 0,\n" +
    49.                 "        music: {\n" +
    50.                 "            url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
    51.                 "            title: \"夜夜夜夜-齐秦\",\n" +
    52.                 "            coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
    53.                 "        }\n" +
    54.                 "    },\n" +
    55.                 "\n" +
    56.                 "{\n" +
    57.                 "        date: \"Sep 18 2016\",\n" +
    58.                 "        title: \"御剑飞仙翱于九天\",\n" +
    59.                 "        imgSrc: \"/images/post/crab.png\",\n" +
    60.                 "        avatar: \"/images/avatar/1.png\",\n" +
    61.                 "        content: \"金庸书的一大特点就是朝代越早武功越高，天龙的朝代算是最早的 因此天龙里面的功夫都比其他书里面的厉害，就连降龙十八掌也比射雕三步曲里面的厉害，天龙里面一阳指不是非常厉害，但是到了射雕就是相当强大的功夫了。但是后面几部书里面还是有一些奇人练的一些奇功超越了前人。\",\n" +
    62.                 "        reading: \"112\",\n" +
    63.                 "        collection: \"96\",\n" +
    64.                 "        headImgSrc: \"/images/post/crab.png\",\n" +
    65.                 "        author: \"林白衣\",\n" +
    66.                 "        dateTime: \"24小时前\",\n" +
    67.                 "        detail: \"菊黄蟹正肥，品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，壳凸红脂块块香”；在《世说新语》里，晋毕卓更是感叹“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣。”漫漫人生长路，美食与爱岂可辜负？于是作为一个吃货，突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹，是家人的味道，弥漫着浓浓的亲情。\\n\\n是谁来自山川湖海，却囿于昼夜，厨房与爱？ 是母亲，深思熟虑，聪明耐心。吃蟹前，总会拿出几件工具，煞有介事而乐此不疲。告诉我们螃蟹至寒，需要佐以姜茶以祛寒，在配备的米醋小碟里，亦添入姜丝与紫苏，前者驱寒后者增香。泡好菊花茶，岁月静好，我们静等。\",\n" +
    68.                 "        postId: 0,\n" +
    69.                 "        music: {\n" +
    70.                 "            url: \"http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38\",\n" +
    71.                 "            title: \"夜夜夜夜-齐秦\",\n" +
    72.                 "            coverImg: \"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000\"\n" +
    73.                 "        }\n" +
    74.                 "    }\n" +
    75.                 "\n" +
    76.                 "  \n" +
    77.                 "    \n" +
    78.                 "]";
    79.         List list2 =g.fromJson(json2,new TypeToken>(){}.getType());
    80.         for (Books b :list2) {
    81.             System.out.println(b);
    82.  
    83.         }
    84.  
    85.  
    86.     }
    87. }

    二、ajax

    简介：

            ajax是一种动态网页技术

            主要用于页面的局部加载

    ajax的特点：

            局部加载：

                    只需要加载网页页面的一部分，不用加载整个页面   效率高

            同步（不是ajax的特点，这里只是介绍）：

                      先获取完整的数据，再加载页面    例如：转账时的同步

            异步：

                      先加载页面，在获取数据    例如：直播弹幕，先加载直播画面 在加载弹幕

    ajax的使用场景：

            注册手机号验证

            直播弹幕

             百度搜索 

     案例：

            需求：验证用户名是否可用

                    get方式jsp代码：

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: 86182
    4.   Date: 2022/9/8
    5.   Time: 10:09
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10.   <head>
    11.     <title>$Title$title>
    12.   head>
    13.   <body>
    14.   <input type="text" id="tv_uname" onblur="cheleckName()"><span style="color: red" id="tv_sp">span>
    15.   <script>
    16.     function cheleckName() {
    17.       var uname = document.getElementById("tv_uname").value;
    18.       if (uname==null||uname==""){
    19.         document.getElementById("tv_sp").innerHTML="输入不能为空";
    20.       }else {
    21.         //获取ajax核心对象
    22.          xmlHttpRequest = new XMLHttpRequest();
    23.          //设置回调函数
    24.         xmlHttpRequest.onreadystatechange=callBack;
    25.         //get方法 url地址
    26.         var url = "userServlet?uname="+uname;
    27.         //建立连接
    28.         xmlHttpRequest.open("get",url,true);//第一个参数表示提交方式，第二个参数表示请求地址，第三个参数表示是否支持异步
    29.         //发送请求
    30.         xmlHttpRequest.send(null);//get方式提交 传递的参数已经在URL地址上拼接了
    31.  
    32.       }
    33.  
    34.     }
    35.     function callBack() {
    36.       //xmlHttpRequest.readyState ==4 表示与服务器建立了连接
    37.       // xmlHttpRequest.status ==200 表示响应成功
    38.       //判断是否连接并响应成功
    39.       if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
    40.         //获取服务器传递的标记
    41.         var flag = xmlHttpRequest.responseText;
    42.         //判断
    43.         if (flag=="true"){
    44.           document.getElementById("tv_sp").innerHTML="用户名可以使用";
    45.         }else {
    46.           document.getElementById("tv_sp").innerHTML="用户名不可以使用";
    47.         }
    48.       }
    49.  
    50.     }
    51.   script>
    52.   body>
    53. html>

                     以post方式提交的jsp页面：

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: 86182
    4.   Date: 2022/9/8
    5.   Time: 10:09
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10.   <head>
    11.     <title>$Title$title>
    12.   head>
    13.   <body>
    14.   <input type="text" id="tv_uname" onblur="cheleckName()"><span style="color: red" id="tv_sp">span>
    15.   <script>
    16.     function cheleckName() {
    17.       var uname = document.getElementById("tv_uname").value;
    18.       if (uname==null||uname==""){
    19.         document.getElementById("tv_sp").innerHTML="输入不能为空";
    20.       }else {
    21.         //获取ajax核心对象
    22.          xmlHttpRequest = new XMLHttpRequest();
    23.          //设置回调函数
    24.         xmlHttpRequest.onreadystatechange=callBack;
    25.         //get方法 url地址
    26.         //var url = "userServlet?uname="+uname;
    27.         //post方式 URL地址
    28.         var url = "userServlet";
    29.         //建立连接
    30.         xmlHttpRequest.open("post",url,true);//第一个参数表示提交方式，第二个参数表示请求地址，第三个参数表示是否支持异步
    31.         //以post方式提交必须设置请求头
    32.         xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    33.         //发送请求
    34.         //xmlHttpRequest.send(null);//get方式提交 传递的参数已经在URL地址上拼接了
    35.         //以post方式提交 要发送参数
    36.         var data = "uname="+uname;
    37.         xmlHttpRequest.send(data);
    38.  
    39.       }
    40.  
    41.     }
    42.     function callBack() {
    43.       //xmlHttpRequest.readyState ==4 表示与服务器建立了连接
    44.       // xmlHttpRequest.status ==200 表示响应成功
    45.       //判断是否连接并响应成功
    46.       if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
    47.         //获取服务器传递的标记
    48.         var flag = xmlHttpRequest.responseText;
    49.         //判断
    50.         if (flag=="true"){
    51.           document.getElementById("tv_sp").innerHTML="用户名可以使用";
    52.         }else {
    53.           document.getElementById("tv_sp").innerHTML="用户名不可以使用";
    54.         }
    55.       }
    56.  
    57.     }
    58.   script>
    59.   body>
    60. html>

            UserServlet类：

    1. package com.qf.servlet;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.annotation.WebServlet;
    5. import javax.servlet.http.HttpServlet;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9. import java.io.PrintWriter;
    10.  
    11. @WebServlet(name = "userServlet",urlPatterns = "/userServlet")
    12. public class UserServlet extends HttpServlet {
    13.     @Override
    14.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    15.         //获取前端传递的参数
    16.         String uname = req.getParameter("uname");
    17.         //定义一个标记
    18.         boolean flag = false;
    19.         //模拟验证
    20.         if ("admin".equals(uname)){
    21.             //表示用户名已经存在 不能使用
    22.             flag = false;
    23.         }else {
    24.             //表示用户名不存在可以使用
    25.             flag = true;
    26.         }
    27.         //将标记返回给ajax
    28.         PrintWriter writer = resp.getWriter();
    29.         writer.print(flag);
    30.         //刷新
    31.         writer.flush();
    32.         //关闭资源
    33.         writer.close();
    34.     }
    35. }

    使用jquery方式实现：

            url ==>表示请求路径

            type==>表示提交方式

            data ==>表示请求传递的参数

            dataType==>表示返回数据的类型   text   json   xml

            success==> 表示请求成功的回调

            error==> 表示请求失败的回调

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: 86182
    4.   Date: 2022/9/8
    5.   Time: 16:26
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10. <head>
    11.     <title>Titletitle>
    12.     <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js">script>
    13. head>
    14. <body>
    15. <input type="text" id="tv_uname"><span style="color: red" id="tv_sp">span>
    16. <script>
    17.     // 使用jquery方式实现ajax
    18.     /*$("#tv_uname").blur(function () {
    19.         var uname = $("#tv_uname").val();
    20.         if (uname==null||uname==""){
    21.             $("#tv_sp").html("不能为空");
    22.         }else {
    23.             $.ajax({
    24.                 "url":"userServlet",
    25.                 "type":"post",
    26.                 "data":{"uname":uname},
    27.                 "dataType":"text",
    28.                 "success":function (data) {
    29.                     if (data=="true"){
    30.                         $("#tv_sp").html("可以使用");
    31.                     }else {
    32.                         $("#tv_sp").html("不可以使用");
    33.                     }
    34.                 },
    35.                 "error":function () {
    36.                     alert("请求失败");
    37.                 }
    38.             });
    39.         }
    40.     })*/
    41.  
    42.     //简化jquery方式实现
    43.     $("#tv_uname").blur(function () {
    44.         var uname = $("#tv_uname").val();
    45.         if (uname==null||uname==""){
    46.             $("#tv_sp").html("不能为空");
    47.         }else {
    48.             $.post("userServlet",{"uname":uname},function (data) {
    49.                 if (data=="true"){
    50.                     $("#tv_sp").html("可以使用");
    51.                 }else {
    52.                     $("#tv_sp").html("不可以使用");
    53.                 }
    54.             },"text")
    55.         }
    56.     })
    57. script>
    58. body>
    59. html>

     案例：

            需求：动态填充table  和 ul

            代码：

                    jsp

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: 86182
    4.   Date: 2022/9/8
    5.   Time: 16:02
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10. <head>
    11.     <title>Titletitle>
    12.     <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js">script>
    13. head>
    14. <body>
    15. <table id="tv_ta" width="80%" border="1px" cellspacing="0px" cellpadding="0px" align="center">
    16.  
    17. table>
    18. <ul id="tv_ul">
    19.  
    20. ul>
    21. <script>
    22.     function show1(){
    23.         $.ajax({
    24.             "url":"servlet1",
    25.             "type":"post",
    26.             "data":{},
    27.             "dataType":"text",
    28.             "success":function (data) {
    29.                 //将后端传递的数据转换为前端可以解析的json
    30.                 var jsonStr = JSON.parse(data);
    31.                 //定义一个变量拼接
    32.                 var temp = "";
    33.                 //循环json串
    34.                 $(jsonStr).each(function () {
    35.                     temp+="
    36. "+this+"
      37. ";
  • })
  • //将数据写入页面
  • $("#tv_ul").html(temp);
  • },
  • "error":function () {
  • alert("请求失败");
  • }
  • });
  • }
  • function show2(){
  • $.ajax({
  • "url":"servlet2",
  • "type":"post",
  • "data":{},
  • "dataTyep":"text",
  • "success":function (data) {
  • //将接收的数据转换为json串
  • var jsonStr=JSON.parse(data);
  • //定义一个变量拼接
  • var temp="";
  • //循环
  • $(jsonStr).each(function () {
  • temp+="";
  • temp+=""+this.sid+"";
  • temp+=""+this.sname+"";
  • temp+=""+this.spwd+"";
  • temp+=""
  • })
  • //将数据写入页面
  • $("#tv_ta").html(temp);
  • },
  • "eroor":function () {
  • alert("请求失败")
  • }
  • });
  • }
  • $(function () {
  • show1();
  • show2();
  • });
  • script>
  • body>
  • html>

    •         servlet：

    1. package com.qf.servlet;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4.  
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11. import java.io.PrintWriter;
    12. import java.util.ArrayList;
    13. import java.util.List;
    14.  
    15. @WebServlet(name = "servlet1",urlPatterns = "/servlet1")
    16. public class Servlet1 extends HttpServlet {
    17.     @Override
    18.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    19.         req.setCharacterEncoding("utf-8");
    20.         resp.setCharacterEncoding("utf-8");
    21.         resp.setContentType("text/html;charset=utf-8");
    22.         //实例化集合
    23.         List list = new ArrayList<>();
    24.         list.add("张珊");
    25.         list.add("李思");
    26.         list.add("王舞");
    27.         //将集合转换为json串
    28.         String s = JSON.toJSONString(list);
    29.         //实例化输出流
    30.         PrintWriter pw = resp.getWriter();
    31.         //将json串传输给前端
    32.         pw.print(s);
    33.         pw.flush();
    34.         pw.close();
    35.     }
    36. }
    37.  
    38.  
    39.  
    40.  
    41.  
    42.  
    43.  
    44. package com.qf.servlet;
    45.  
    46. import com.alibaba.fastjson.JSON;
    47. import com.qf.entity.Student;
    48.  
    49. import javax.servlet.ServletException;
    50. import javax.servlet.annotation.WebServlet;
    51. import javax.servlet.http.HttpServlet;
    52. import javax.servlet.http.HttpServletRequest;
    53. import javax.servlet.http.HttpServletResponse;
    54. import java.io.IOException;
    55. import java.io.PrintWriter;
    56. import java.util.ArrayList;
    57. import java.util.List;
    58.  
    59. @WebServlet(name = "servlet2",urlPatterns = "/servlet2")
    60. public class Servlet2 extends HttpServlet {
    61.     @Override
    62.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    63.         req.setCharacterEncoding("utf-8");
    64.         resp.setCharacterEncoding("utf-8");
    65.         resp.setContentType("text/html;charset=utf-8");
    66.         //实例化集合
    67.         List list = new ArrayList<>();
    68.         list.add(new Student(1001,"班长","嫩老"));
    69.         list.add(new Student(1002,"梁男","钓鱼老"));
    70.         list.add(new Student(1003,"黑福","洗脚老"));
    71.         //将集合转换为json串
    72.         String s = JSON.toJSONString(list);
    73.         //实例化输出流
    74.         PrintWriter pw = resp.getWriter();
    75.         //将json串传输给前端
    76.         pw.print(s);
    77.         pw.flush();
    78.         pw.close();
    79.     }
    80. }

  • 相关阅读:
    01.oracle介绍
    Unity开发者3D模型基础
    vscode——本地配置（C和C++环境配置）（2）
    Redis数据库安装、使用、数据类型、常用命令（详解）
    FFmpeg源码：AV_RB32宏定义分析
    【编程之路】面试必刷TOP101：动态规划（72-77，Python实现）
    帝国CMS的Sitemap网站地图生成插件下载及教程
    《Orange‘s 一个操作系统的实现》第六章
    Day727.键值数据库的基本架构 -Redis 核心技术与实战
    Vue3学习
  • 原文地址：https://blog.csdn.net/qq_53884348/article/details/126760714