AJAX&文件上传

其他 2020-04-28 12:28:56 阅读次数: 0

JSON

最早是JavaScript对象表示形式，现在主要用于互联网传输数据载体

  • java
    User user =new User();
    user.setUsername(“jack”);
    user.setAge(18);

  • javaScript
    let user = {“username”:“jack”,“age”:18};

      let array = [{},{},{}]
  
  name:都是字符串
  value：支持各种类型

JSON数据与java对象转换

Jackson开源免费的json转换工具，springmvc转换默认使用jackson
提供了一个核心转换器对象
ObjectMapper om = new ObjectMapper();

java对象转为json(字符串)

String writeValueAsString(Object object);

package cn.itcast.a_jackson;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class TestJackson {
    @Test
    public void UserToJson() throws Exception {
        //将user对象转为json字符串
        User user = new User("1", "jack", "女", 15, "中国", "123", "[email protected]");
        //创建Jackson转化器对象
        ObjectMapper om = new ObjectMapper();
        //将任意对象转为json字符串
        String json = om.writeValueAsString(user);
        System.out.println(json);
        //{"id":"1","name":"jack","sex":"女","age":15,"address":"中国","qq":"123","email":"[email protected]"}
    }

    //将map集合转为json字符串
    @Test
    public void MapToJson() throws Exception {
        Map<String, Object> map = new HashMap<>();
        map.put("name", "张三");
        map.put("age", 18);
        //创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();
        //转换为json字符串
        String json = om.writeValueAsString(map);
        System.out.println(json);
        //{"name":"张三","age":18}
    }

    //将list集合转换为json字符串
    @Test
    public void ListToJson() throws Exception {
        ArrayList<User> list = new ArrayList<>();
        list.add(new User("1", "jack", "女", 15, "中国", "123", "[email protected]"));
        list.add(new User("2", "tom", "男", 15, "中国", "123", "[email protected]"));
        //创建json转换器
        ObjectMapper om = new ObjectMapper();
        //转换为json字符串
        String json = om.writeValueAsString(list);
        System.out.println(json);
        //[{"id":"1","name":"jack","sex":"女","age":15,"address":"中国","qq":"123","email":"[email protected]"},
        //{"id":"2","name":"tom","sex":"男","age":15,"address":"中国","qq":"123","email":"[email protected]"}]
    }


}

将json（字符串）转换为java对象

T readValue(String json,Class<T> classType);

package cn.itcast.a_jackson;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.List;
import java.util.Map;

public class TestToJava {
    //将json字符串转换为user对象
    @Test
    public void JsonToUser() throws Exception {
        String json = "{\"id\":\"1\",\"name\":\"jack\",\"sex\":\"女" +
                "\",\"age\":15,\"address\":\"中国\",\"qq\":\"123\",\"email\":\"[email protected]\"}";
        //创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();
        //转换为user对象
        User user = om.readValue(json, User.class);
        System.out.println(user);
        //User{id=1, name='jack', sex='女', age=15, address='中国', qq='123', email='[email protected]'}

    }

    //将json字符串转换为map集合
    @Test
    public void JsonToMap() throws Exception {
        String json = "{\"name\":\"张三\",\"age\":18}";
        //创建jackson转化器
        ObjectMapper om = new ObjectMapper();
        //转换为map集合
        Map<String, Object> map = om.readValue(json, Map.class);
        System.out.println(map);
        //{name=张三, age=18}
    }

    //将json数组字符串转换为list集合
    @Test
    public void JsonToList() throws Exception {
        String json = "[{\"id\":\"1\",\"name\":\"jack\",\"sex\":\"女\",\"age\":15,\"address\":\"中国\",\"qq\":\"123\",\"email\":\"[email protected]\"},\n" +
                "{\"id\":\"2\",\"name\":\"tom\",\"sex\":\"男\",\"age\":15,\"address\":\"中国\",\"qq\":\"123\",\"email\":\"[email protected]\"}]";
        //创建jackson转换器对象
        ObjectMapper om = new ObjectMapper();
        //转换为list集合
        List list = om.readValue(json, List.class);
        System.out.println(list);
        //[{id=1, name=jack, sex=女, age=15, address=中国, qq=123, [email protected]}, 
        // {id=2, name=tom, sex=男, age=15, address=中国, qq=123, [email protected]}]
    }
}

案例：检查用户名是否可用

  • 检查用户名是否可用，在用户注册页面，输入用户名，当用户名输入框失去焦点时，发送异步请求，将输入框的用户名传递给服务器进行性是否存在的校验

  • 技术分析：使用ajax技术，通过异步提交，实现页面的局部刷新，提高用户的体验
    Jquery提供的ajax函数

  • ajax
    $.ajax({
    type:“请求方式，get|post”,
    url:“请求服务器地址”,
    data:“请求参数”,
    success:function(resp){
    resp就是服务器返回的结果…
    }
    });

  • get
    $.get(url(地址?参数),function(resp){

      });

  • post
    $.post(url,data,function(resp){

      })

package cn.itcast.b_case;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置中文编码格式
        request.setCharacterEncoding("utf-8");
        //接受请求参数
        String username = request.getParameter("username");
        //声明map集合
        Map<String, Object> map = new HashMap<>();
        //判断用户是否存在
        if (username.equals("jack")) {
            map.put("flag", false);
            map.put("msg", "该用户已经存在");
        } else {
            map.put("flag", true);
            map.put("msg", "此用户可以注册");
        }
        //将map集合转换为json字符串
        ObjectMapper om = new ObjectMapper();
        String json = om.writeValueAsString(map);
        //设置json的MIME类型
        response.setContentType("application/json;charset=utf-8");
        //response响应json客户端
        response.getWriter().write(json);
    }

}


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
</head>
<body>
<h3>用户注册</h3>
<form action="#" method="post">
    用户名：<input type="text" name="username" id="username"> <span id="userwarn">
</span> <br>
</form>
<script>

    // 给用户文本框绑定失去焦点事件
    $('#username').blur(function () {
        // 获取用户输入的值
        //console.log(this.value);
        let data = "username=" + this.value;
        // 发送ajax请求
        $.ajax({
            type:"post",
            url:'${pageContext.request.contextPath}/CheckServlet',
            data:data,
            success:function (resp) {
                console.log(resp);
                // 判断结果并实现局部刷新
                if(resp.flag){
                    $('#userwarn').text(resp.msg).css('color','green');
                }else{
                    $('#userwarn').text(resp.msg).css('color','red');
                }
            }
        })
    })

</script>
</body>
</html>

文件上传

  • 在用户注册页面，我们可以输入用户名，还可以选择要上传的文件，点击上传按钮就可以将用户输入的内容和选择的文件保存到服务器上
  • 客户端将文件转为文本

  1. 表单提交方式必须为post
    action=“post”

  2. 表单的enctype属性值必须为multipart/form-data 多组件表单数据
    enctype=“multipart/form-data”

  3. 在表单中提供文件上传项
    < input type=“file” name=“pic”>
    服务器将文本转为字节流
    使用apache提供工具类 commons-fileupload

package cn.itcast.b_case;

import cn.hutool.core.io.FileUtil;
import cn.hutool.core.io.IoUtil;
import cn.hutool.core.util.IdUtil;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.List;

@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //创建磁盘文件项工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();
            //创建上传解析器对象
            ServletFileUpload fileUpload = new ServletFileUpload(factory);
            //解析request请求，返回上传项list集合
            List<FileItem> fileItems = fileUpload.parseRequest(request);
            //遍历list
            for (FileItem fileItem : fileItems) {
                //判断是文件项还是普通项
                if (fileItem.isFormField()) {//普通的上传项
                    //获取name属性
                    String name = fileItem.getFieldName();
                    //获取value属性值
                    String value = fileItem.getString();

                } else {
                    //文件上传项
                    //获取文件名
                    String fileName = fileItem.getName();
                    //获取文件字节输入流
                    InputStream in = fileItem.getInputStream();
                    //获取文件的扩展名
                    String extName = FileUtil.extName(fileName);
                    //生成随机文件
                    fileName = IdUtil.simpleUUID() + "." + extName;
                    //获取upload目录在服务器的真实路径
                    String realPath = request.getServletContext().getRealPath("/upload/");
                    //判断此目录是否存在
                    File dirFile = new File(realPath);
                    if (!dirFile.exists()) {
                        //如果不存在，自动创建
                        dirFile.mkdirs();
                    }
                    //设置文件的字节输出流
                    FileOutputStream out = new FileOutputStream(realPath + fileName);
                    //流的拷贝（糊涂工具包）
                    IoUtil.copy(in, out);
                    //关流
                    out.close();
                    in.close();
                    response.getWriter().write("success");

                }
            }

        } catch (FileUploadException e) {
            e.printStackTrace();
        }
    }

}




<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
</head>
<body>
<h3>用户注册</h3>
<form action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="username" id="username"><br>
    头像：<input type="file" name="pic"><br>
    <input type="submit" value="提交">
    <span id="userwarn"></span> <br>
</form>
<script>

    // 给用户文本框绑定失去焦点事件
    $('#username').blur(function () {
        // 获取用户输入的值
        //console.log(this.value);
        let data = "username=" + this.value;
        // 发送ajax请求
        $.ajax({
            type: "post",
            url: '${pageContext.request.contextPath}/CheckServlet',
            data: data,
            success: function (resp) {
                console.log(resp);
                // 判断结果并实现局部刷新
                if (resp.flag) {
                    $('#userwarn').text(resp.msg).css('color', 'green');
                } else {
                    $('#userwarn').text(resp.msg).css('color', 'red');
                }
            }
        })
    })

</script>
</body>
</html>
不污男孩叫小污
发布了34 篇原创文章 · 获赞 9 · 访问量 1258
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43616750/article/details/105763296
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022