ajax&json

~是小王吖~

已于 2023-01-14 19:48:21 修改

阅读量301

点赞数

分类专栏： Java jQuery idea 文章标签： 1024程序员节

于 2022-10-24 20:16:43 首次发布

本文链接：https://blog.csdn.net/Sunblogy/article/details/127486615

版权

Java 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

idea

35 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

1.ajax

ajax(Asynchronous Javascript And XML) 异步的js和xml

本质：ajax通过操作dom去完成操作，实现操作部分，不会影响整个界面
功能：在与服务器交互的时候，可以在不刷新整个页面的前提下，实现页面的局部刷新，是一种前后端交互的技术，也就是只刷新网页的一部分，而不是刷新整个网页就可以使用ajax来完成
异步和同步
同步：需要等待
异步：客户端和服务器通信的时候，不需要等待服务器响应就可以做其他事情，
作用
提高用户体验，减少了数据的交互的量，减少服务器压力

readyState：
0 请求未初始化
1 服务器连接已建立
2 请求已接受
3 请求处理中
4 请求已完成，并且响应就绪

2.json

2.1 json介绍

全称 javascript object notation
js对象表示法

本质：在 js 中就是一个对象
优势：
可以用来描述对象
网络间传输数据的一种格式，可以跨语言，很多语言都支持json
多用于存储数据和交换数据
json 比 xml 更小，更快，更容易解析
语法格式：
json中的数据主要是以键值对的形式存在的
{一个大括号代表一个对象}
键：可以使用单引号、双引号或者不适用引号
值：根据数据类型选择是否添加引号

数字：{age:18}

字符串：{name:"张三"}

boolean：{isXX:true}

数组：数组一般用中括号括起来{hobby:["篮球","足球"]} 里面也可以放对象，在中括号中用大括号来表示对象{hobby:[{type:"篮球"},{type:"足球"}]}

对象：对象一般用花括号括起来：{user:{name:"张三",age:18}}

数据之间一般用逗号隔开
花括号描述对象
中括号描述数组

2.2 java对象与json的转换

可以通过手动拼接的方式来进行转换，一般使用第三方库来进行转换

Gson 谷歌公司出品
jackson spring 推荐使用
fastJson 阿里出品

建议使用：fastJson

依赖：

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.75</version>
</dependency>

json小demo，已经存在user类了

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.zlt.entity.User;
import org.junit.Test;
import java.util.Date;
/**
 * @Author:小王吖
 * @Date:2022/10/24
 */
public class JosnTest {
    //java对象与json的转换
    @Test
    public void test(){
        User user = new User(1L,"zhangsan","123456","123","9534@qq.com","张三",new Date(),new Date(),0,"default.jpg");
        //将java对象转换成json
        String s = JSON.toJSONString(user);//这样直接转换回来，时间就是当时的时间戳，数据显示在一行
        System.out.println(s);

        String s1 = JSON.toJSONString(user, true);//这样就是每个属性一行的输出，好看一点
        System.out.println(s1);

        //json字符串转java对象
        //1.得到json对象
        JSONObject jsonObject = JSON.parseObject(s);//得到的是一个json对象，然后可以通过这个对象去调用对应的属性
        Object username = jsonObject.get("username");//这样获取的还是一个对象，并不是字符串
        System.out.println(username);
        String username1 = jsonObject.getString("username");//这样就获取到了字符串
        System.out.println(username1);

        //2.得到对应的Java类对象
        User user1 = JSON.parseObject(s, User.class);//这样就获的了user对象
        System.out.println(user1);
    }
}

注意：

时间戳转换为指定的时间格式：
需要在类的属性上面使用注解： @JSONField(format = "yyyy-MM-dd HH:mm:ss")
不允许属性被序列化使用：
@JSONField(serialize = false)//在java转json对象的时候，就不会序列化了，这样就隐藏了这个属性，如果再转回去java对象，就会显示null
不允许属性被反序列化使用：
@JSONField(deserialize = false)//代表不能够反序列化，也就是在json转java对象的时候，不会被显示
序列化的时候，顺序是乱的，可以通过注解来调整输出顺序
@JSONField(ordinal = 1)//ordinal 关键字可以去确定转json的时候属性的顺序，默认为0，依次设置可以调整输出顺序

2.3 ajax实现文件上传

获取文件参数使用 Collection<Part> parts = request.getParts();
前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form action="">
    <img src="" alt=""><br>
    <span>选择头像</span><input type="file" name="photo"><br>
</form>
<script>
    var element = document.querySelector("input[name='photo']");
    element.onchange = function () {
        //获取文件选择器选中的文件
        //利用前端数据对象来操作
        let formData = new FormData();
        formData.append("fileName","aaa");//需要什么对象就用append去添加
        let length = this.files.length;//this就是这个文件选择器，文件可以多选，所以这里其实是一个数组
        //文件数组的话，就要将每一个选中的文件给添加进去
        for (let i = 0; i < length ; i++) {
            formData.append("photo",this.files[i]);//一次将文件对象一个个的传进去
        }
        //创建ajax对象
        let xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        //打开连接
        xmlhttp.open("post","/ajax/user/upload",true);
      /*  //post的话要加上post的请求头
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        */
        // 发送请求 请求体 参数要写进去
        xmlhttp.send(formData);
        //回调函数响应
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                let responseText = xmlhttp.responseText;//响应回来的数据
                let data = JSON.parse(responseText);
                //这个data现在是result，需要把result里面的真正的data给放入img中
                document.querySelector("img").src = data.data;
            }
        }

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

后端（只含方法代码）：

package com.xiaowang.controller;

import com.alibaba.fastjson.JSON;
import com.xiaowang.entity.Result;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.UUID;

/**
 * @Author:小王吖
 * @Date:2023/1/7
 */
@WebServlet("/user/*")
@MultipartConfig
public class UserController extends HttpServlet {
  //更新
    protected void upload(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=utf-8");
        //普通参数
        String fileName = req.getParameter("fileName");
        //文件参数
        Part photo = req.getPart("photo");
        //保存文件 对应路径中呗
        if (photo.getSize()>0){//有文件上传的时候
            String name = photo.getSubmittedFileName();//前端传来的文件名字
            fileName = UUID.randomUUID()+name.substring(name.lastIndexOf("."));//保存文件名
            String url = getServletContext().getRealPath("/files")+ File.separator+fileName;//文件保存的路径
            //将文件保存写进去
            photo.write(url);
        }
        //响应对象
        Result result = new Result();
        result.setCode(0);
        result.setData("/ajax/files/"+fileName);//响应回去的文件名
        //将result对象转成json
        //使用fastjson、
        String s = JSON.toJSONString(result);
        PrintWriter writer = resp.getWriter();
        //响应result对象的字符串过去
        writer.write(s);
    }
}
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String requestURI = req.getRequestURI();
        String method = requestURI.substring(requestURI.lastIndexOf("/" ) + 1);
        try {
            Method declaredMethod = getClass().getDeclaredMethod(method, HttpServletRequest.class, HttpServletResponse.class);
            declaredMethod.setAccessible(true);
            declaredMethod.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
            System.out.println("404");
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        doGet(req, resp);
    }

注意：文件路径一定要写正确，多个文件记得使用数组对象去存，

2.4 jquery实现

2.4.1jquery实现用户名检测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="">
    <span>账号</span><input type="text" name="username"><span></span><br>
    <span>密码</span><input type="password" name="password"><br>
    <input type="submit" value="注册">
</form>
<script src="../js/jquery-3.6.0.js"></script>
<script>
    //使用jq完成  不常用格式
 $("input[name='username']").blur(function () {
     //用户名
     let value = this.value;
     /*请求方式：
      *  $.get
      *  $.post
      *  $.getJSON  只能用与JSON对象
      *  $.("选择器").load("url 选择器")  将url的选择器的对象加载到本选择器对象中使用
      * */
     //get方法  请求路径  请求参数   回调函数
     $.get("/ajax/user/selectUsername",{username:value},function (result) {
         //回调响应函数
         //在输入框后面显示具体的信息
         let span = $("input[name='username']+span");
         if (result.code == 0){
             span.css("color","green");
         }else {
             span.css("color","red");
         }
     })
     //post请求
     //请求路径  请求参数   回调函数
     $.post("/ajax/user/selectUsername",{username: value},function (result) {
         //回调响应函数
         //在输入框后面显示具体的信息
         let span = $("input[name='username']+span");
         if (result.code == 0){
             span.css("color","green");
         }else {
             span.css("color","red");
         }
     })
 });
$.ajax({
        url:"/ajax/user/selectUsername",//请求路径
        type:"get",//请求方式 默认get
        data:{username: value},//请求参数
        dataType:"json",//响应数据类型
        headers:{a:"a",b:"b"},//请求头，是可以传参数的
        timeout:5000,//超时时间
        success:function (result) {//里面的参数可以是很多，
            //响应200的回调，具体操作
            let span = $("input[name='username']+span");
            if (result.code == 0){
                span.css("color","green");
            }else {
                span.css("color","red");
            }
        },
        error:function (){
            //响应失败的回调，超时，非200，datatype和响应的数据类型不一致
        },
        compile:function () {
            //无论成功还是失败都要执行
        }
    })


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

2.4.2jquery实现ajax常用格式

jq实现ajax的时候，通常使用一下格式，这样扩展性更高：

//jq常用格式
    $.ajax({
        url:"",//请求路径
        type:"get",//请求方式
        data:{username: value},//请求参数
        dataType:"json",//响应数据类型
        headers:{a:"a",b:"b"},//请求头，是可以传参数的
        timeout:5000,//超时时间
        success:function (result) {//里面的参数可以是很多，
            //响应200的回调，具体操作
        },
        error:function (){
            //响应失败的回调，超时，非200，datatype和响应的数据类型不一致
        },
        compile:function () {
            //无论成功还是失败都要执行
        }

2.4.1jquery实现文件上传

前端如下：后端不需要改，和原生的一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form action="">
    <img src="" alt=""><br>
    <span>选择头像</span><input type="file" name="photo"><br>
</form>
<script>
    $("input[name = 'photo']").change(function () {
        //获取文件选择器选中的文件
        //利用前端数据对象来操作
        let formData = new FormData();
        formData.append("fileName","aaa");//需要什么对象就用append去添加
        let length = this.files.length;//this就是这个文件选择器，文件可以多选，所以这里其实是一个数组
        //文件数组的话，就要将每一个选中的文件给添加进去
        for (let i = 0; i < length ; i++) {
            formData.append("photo",this.files[i]);//一次将文件对象一个个的传进去
        }
        $.ajax({
            url:"/ajax/user/upload",
            type:"post",
            data:formData,
            dataType:json,//可以不用规定数据类型
            catch:false,//false：不需要缓存
            processData: false,//false：对象不需要转换成字符串
            contentType:false,//和processData配套，这样发送什么就获得什么，不会变
            success:function (result) {
                //document.querySelector("img").src = data.data;
                $("img").prop("src",result.data);
            },
            error:function () {
                //响应失败
            }
        })
    });
</script>
</body>
</html>

~是小王吖~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax&json

全称 javascript object notationjs对象表示法本质：在 js 中就是一个对象优势：可以用来描述对象网络间传输数据的一种格式，可以跨语言，很多语言都支持json多用于存储数据和交换数据json 比 xml 更小，更快，更容易解析语法格式：json中的数据主要是以键值对的形式存在的{一个大括号代表一个对象}键：可以使用单引号、双引号或者不适用引号值：根据数据类型选择是否添加引号数字：{age:18}字符串：{name:"张三"}
复制链接

扫一扫

专栏目录