投稿
  1. 极客之音首页
  2. 后端笔记

JSON和文件上传

飞熊 • • 后端笔记 • 阅读 155

如果你不相信努力和时光，那么成果就会是第一个选择辜负你的。不要去否定你自己的过去，也不要用你的过去牵扯你现在的努力和对未来的展望。不是因为拥有希望你才去努力，而是去努力了，你才有可能看到希望的光芒。JSON和文件上传，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

JSON

1.1. JSON简介

  • JSON是一种轻量级的数据传输格式，解析简单 方便阅读

  • JSON中支持的数据类型：string，数值，布尔，JSON对象，数组，null

  • 语法：

    • key :value
    • 上下键值对之间使用逗号隔开
    • KEY使用双引号引起来，字符串类型的数据都是使用双引号引起来
    • 对象使用{} 数组使用[ ]

1.2.Java对JSON的处理

Java中并没有内置JSON的解析，因此使用JSON需要借助第三方类库。

下面是几个常用的 JSON 解析类库：

  • Gson: 谷歌开发的 JSON 库，功能十分全面。
  • FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
  • Jackson: 社区十分活跃且更新速度很快。

使用三方jar包先引入

 @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        List<Goods> goods = goodsService.queryAll();

        //生成一个对象
        Gson gson = new Gson();
        // 把Java对象转换为符合JSON语法的字符串
        String str = gson.toJson(goods);
        System.out.println(str);
        Goods goods1 = goods.get(0);
        String s = gson.toJson(goods1);
        System.out.println(gson.toJson(s));

        // 把符合JSON语法字符串转为Java对象
        Goods goods2 = gson.fromJson(s, Goods.class);
        System.out.println(goods2);
        //把符合JSON语法字符串转为Java集合
        List<Goods> o = gson.fromJson(str, new TypeToken<List<Goods>>() {
        }.getType());
        System.out.println(o);
        resp.getWriter().write(str);
    }

1.3.JS中对JSON的处理

  • JS中自带对JSON的处理
                  // 把JSON字符串解析为JS中的对象
                  var parse = JSON.parse(data);
                  //把JS对象转换为符合JSON格式的字符串
                  var str = JSON.stringify(parse);
                  console.log(parse);
                  console.log(str);

1.4.购物车案例

页面代码

展示商品页面代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a href="/showCart.html">去购物车结算</a>
<table class="table" id="mainTab">
    <tr>
        <th>商品编号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品折扣</th>
        <th>操作</th>
    </tr>
</table>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        // 异步请求
        $.get('/goods', function (data) {
            console.log(data);
            $.each(data, function (index, item) {
                $('#mainTab').append($('<tr></tr>')
                    .append($('<td></td>').text(item.id))
                    .append($('<td></td>').text(item.name))
                    .append($('<td></td>').text(item.price))
                    .append($('<td></td>').text(item.discount))
                    .append($('<td></td>').append($('<button class="btn btn-info addToCart">添加到购物车</button>').attr('data-gid', item.id)))
                );
            });
            // 解析字符串
            //给button按钮添加点击事件
            $('.addToCart').click(function () {
                console.log('clicked');
                //获取商品id信息
                let gId = $(this).attr('data-gid');
                let cookieKey = 'good_' + gId;
                //在cookie中保存此商品信息
                let cookieStr = document.cookie;
                // 'good_1=1  ;  good_2=2  ; good_5=1 '
                let cookies = cookieStr.split('; ');
                // key =value good_id=1
                let goodNum = 1;
                $.each(cookies, function (index, item) {
                    var strings = item.split('=');
                    if (cookieKey == strings[0]) {
                        goodNum = parseInt(strings[1]) + 1;
                    }
                });
                document.cookie = cookieKey + "=" + goodNum;
            })
        },'json');
    })
</script>
</body>
</html>

购物车页面代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a href="/showCart.html">去下单</a>
<table class="table" id="mainTab">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>
</table>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        // 异步请求
        $.get('/cart', function (data) {
            console.log(data);
            $.each(data, function (index, item) {
                $('#mainTab').append($('<tr></tr>')
                    .append($('<td></td>').text(item.name))
                    .append($('<td></td>').text(item.price))
                    .append($('<td></td>').text(item.store))
                    .append($('<td></td>').text(item.store*item.price))
                    .append($('<td></td>').append($('<button class="btn btn-info addToCart">删除</button>').attr('data-gid', item.id)))
                );
            })
            // 解析字符串
        }, 'json');
    })
</script>
</body>
</html>

后台代码

获取商品信息的Servlet

@WebServlet("/goods")
public class GoodsController extends HttpServlet {
    private GoodsService goodsService = new GoodsServiceImpl();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/json;charset=UTF-8");
        List<Goods> goods = goodsService.queryAll();
        //生成 GSON 对象
        Gson gson = new Gson();
        // 把Java对象转换为符合JSON语法的字符串
        String str = gson.toJson(goods);
        resp.getWriter().write(str);
    }
}

获取购物车商品信息的servlet

@WebServlet("/cart")
public class CartServlet extends HttpServlet {
    private GoodsService goodsService = new GoodsServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取cookie信息
        resp.setContentType("text/json;charset=UTF-8");
        Cookie[] cookies = req.getCookies();
        ArrayList<Goods> goods1 = new ArrayList<>();
        if (cookies != null && cookies.length > 0) {
            for (Cookie cookie : cookies) {
                // good_id
                String name = cookie.getName();
                if (name.startsWith("good_")) {
                    String idStr = name.split("_")[1]; // "1"
                    Goods goods = goodsService.queryById(Integer.valueOf(idStr));
                    // GoodVo
                    goods.setStore(Integer.valueOf(cookie.getValue()));
                    if (goods != null) {
                        goods1.add(goods);
                    }
                }
            }
            Gson gson = new Gson();
            String s = gson.toJson(goods1);
            resp.getWriter().write(s);
        }
    }
}

文件上传

  • 借出第三方jar包实现，需要导入commons-fileupload.jar和commons-io.jar

1.1.使用form表单上传文件

前端页面

<body>
<!-- 文件上传   enctype="multipart/form-data" -->
<form action="/fileUpload" method="post" enctype="multipart/form-data">
    用户名： <input type="text" name="username"> <br>
    密码： <input type="password" name="pass"> <br>
    头像： <input type="file" name="file" id="file"> <br>
    <input type="submit" value="提交">
</form>

后端代码servlet

 @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 解析此请求是否是一个文件上传的请求
        boolean isMultipart = ServletFileUpload.isMultipartContent(req);
        if (isMultipart) {
            //保存到服务器的路径
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // 创建一个文件上传的处理器
            ServletFileUpload upload = new ServletFileUpload(factory);
            String baseDir = getServletContext().getRealPath("/repository");
            // 解析请求
            try {
                List<FileItem> items = upload.parseRequest(req);
                items.forEach((item) -> {
                    // 是普通的表单项
                    if (item.isFormField()) {
                        String name = item.getFieldName();
                        String value = item.getString();
                        System.out.println(name + " ： " + value);
                    } else {
                        //是一个文件项 ,写到本地服务器
                        try {
                            // 获取文件名
                            String name = item.getName();
                            String suffix = name.substring(name.lastIndexOf("."));
                            //生成一个文件名 随机
                            UUID uuid = UUID.randomUUID();
                            //防止文件名冲突
                            String newFileName = uuid.toString().replaceAll("-", "").toUpperCase() + suffix;
                            item.write(new File(baseDir, newFileName));
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                });
            } catch (FileUploadException e) {
                e.printStackTrace();
            }
        }
    }

1.2. Ajax请求上传文件

  • 需要导入第三方插件，实现文件上传

前端页面代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #show {
            display: none;
        }
    </style>
</head>
<body>
<form>
    user: <input type="text" name="username"> <br>
    头像 : <input type="file" name="file" id="fileId"> <br>
    <img id="show" width="100" height="100">
    <button id="btn1">提交</button>
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<!--第三方的插件， 用来实现发送文件上传请求-->
<script src="js/ajaxfileupload.js"></script>
<script>
    $(function () {
        $('input:file').change(function () {
            // 上传文件
            $.ajaxFileUpload({
                type: "POST",
                url: "/fileUpload",
                //文件选择框的id属性
                fileElementId: 'fileId',
                //服务器返回的格式
                dataType: 'json',
                success: function (data) {
                   
                        $("#show").css('display', 'block');
                        $("#show").attr('src', data.url)
                    
                },
                error: function (data, status, e) {
                }
            });
        })
    })
</script>
</body>
</html>

后端代码

try {
                            // 获取文件名
                            String name = item.getName();
                            String suffix = name.substring(name.lastIndexOf("."));
                            //生成一个文件名 随机
                            UUID uuid = UUID.randomUUID();
                            //防止文件名冲突
                            String newFileName = uuid.toString().replaceAll("-", "").toUpperCase() + suffix;
                            item.write(new File(baseDir, newFileName));
                            //
                            HashMap<String, String> map = new HashMap<>();
                            map.put("url", "/repository/" + newFileName);
                            Gson gson = new Gson();
                            String s = gson.toJson(map);
                            resp.getWriter().write(s);
                        } catch (Exception e) {
                            e.printStackTrace();
                        }

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/192934.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！