ajax和JSON,ajax请求格式,属性、JSON字符串java对象、字符转换

1 篇文章 0 订阅

ajax 和Json

ajax简介

Ajax 即“Asynchronous Javascript AndXML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

ajax如何工作

AJAX

图片来自菜鸟教程

首先了解一下ajax的格式,常用参数

#ajax请求分get和post以下是常见最经常使用的参数    
	jQuery.get({
        url: 要请求的url
        data: 发送的数据(键值对的形式,可以多个参数)
        success: 成功是执行的函数
        dataType: 返回内容的格式
    })
    jQuery.post({
        url: 要请求的url
        dara: 发送的数据(键值对的形式,可以多个参数)
        success: 成功是执行的函数
        dataType: 返回内容的格式
    })
#部分参数
jQuery.ajax(...)
      部分参数:
            url:请求地址
            type:请求方式,GETPOST1.9.0之后用method)
        headers:请求头
            data:要发送的数据
    contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async:是否异步
        timeout:设置请求超时时间(毫秒)
      beforeSend:发送请求前执行的函数(全局)
        complete:完成之后执行的回调函数(全局)
        success:成功之后执行的回调函数(全局)
          error:失败之后执行的回调函数(全局)
        accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型
        dataType:将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数

使用jQuery实现ajax

  1. 下载jquery.min.js :下载地址

  2. 先编写一个后端的请求(用于一会ajax请求返回数据)

    @Controller
    public class AjaxController {
    
        @RequestMapping("/getData")
        @ResponseBody
        public String getData(String name){
            return name;
        }
    }
    
  3. 编写前端代码:(设置一个按钮给它一个点击事件,通过点击事件触发ajax请求后端)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/jquery-3.5.1.min.js"></script>
        <title>Document</title>
    </head>
    <body>
        <input type="text" id="data" value="13123">//输入框用来传输参数
        <input id="submit" onclick="a1()" type="button" value="请求">//触发事件
        <script>
            var qs = $("#data").val();//获取输入框的参数
            function a1() {
                $.ajax({
                    url:"http://localhost:8080/getData",//请求的地址
                    data: {name:qs},//请求参数(键值对的形式,可以多个参数)
                    success: function (data) {//成功回调函数
                        console.log(data);//控制台打印返回的数据
                        alert(data);//警告框提示返回数据
                    }
                });
            }
        </script>
    </body>
    </html>
    
  4. 启动后台服务,前端请求测试

在这里插入图片描述
注意:请求没有发送过去这个就是同源策略禁止读取远程资源怎么解决呢?

  1. 发现问题,解决问题(在我们的后端代码中加入一个配置类springboot项目为例)

    @Component
    public class CrosConfig implements WebMvcConfigurer {
        
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                    .allowCredentials(true)
                    .maxAge(3600)
                    .allowedHeaders("*");
        }
    }
    
  2. 再次请求测试

在这里插入图片描述
这次完美成功

使用ajax不需要刷新页面依然能够做到动态的改变()

json简介

什么是json

  • JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别广泛。

  • 采用完全独立于编程语言的文本格式来存储和表示数据。

  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

json的语法格式

  • 对象表示为键值对,数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

例:

{"name": "xiaoming"}
{"age": "3"}
{"sex": "男"}

json和JavaScript对象相互转换

JSON字符串转换为JavaScript 对象,使用 JSON.parse() 方法:

var obj = JSON.parse('{"a": "你好", "b": "小明"}');
//结果是 {a: '你好', b: '小明'}

JavaScript 对象转换为JSON字符串,使用 JSON.stringify() 方法:

var json = JSON.stringify({a: '你好', b: '小明'});
//结果是 '{"a": "你好", "b": "小明"}'

创建项目使用json格式返回

  1. 创建项目(以springboot项目为例)

  2. 导入依赖(除这个依赖还有一个阿里的也是同样的方法不过里面的方法名不同)

    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.10.2</version>
    </dependency>
    
  3. 编写代码(首先编写一个实体类,将实体类对象封装成json字符串)

    public class User {
        private Integer id ;
        private String name;
        private Integer age;
    //省略get、set、有参、无参、tostring
    }
    
    public static void main(String[] args) throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        User user = new User(1,"xiaoming",5);
        String userStr = mapper.writeValueAsString(user);
        System.out.println(user);
        //输出结果:User{id=1, name='xiaoming', age=5}
        System.out.println(userStr);
        //输出结果:{"id":1,"name":"xiaoming","age":5}
    }
    
        //这样直接返回可能出现中文乱码问题
    	//在@RequestMapping添加一个参数produces ="application/json;charset=utf-8"
    	//就能解决
    	@RequestMapping(value = "/getJson")
        @ResponseBody
        public String getJson() throws JsonProcessingException {
            ObjectMapper mapper = new ObjectMapper();
            User user = new User(1,"xiaoming",5);
            String userStr = mapper.writeValueAsString(user);
            return userStr;
        }
    
    返回结果和上面是一样的
    

    json转换是时间的问题

        public static void main(String[] args) throws JsonProcessingException {
            ObjectMapper mapper = new ObjectMapper();
            Date date = new Date();
            System.out.println(date);
            //输出结果:Tue Jun 16 19:20:00 CST 2020
            System.out.println(mapper.writeValueAsString(date));
            //输出结果:1592306400529
    	}
    

    发现问题:返回了时间戳,格式并不是我们想要的

    解决:

        public static void main(String[] args) throws JsonProcessingException {
            ObjectMapper mapper = new ObjectMapper();
            //不使用时间戳返回
            mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
            //自定义时间格式
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            //指定日期格式
            mapper.setDateFormat(sdf);
            Date date = new Date();
            System.out.println(date);
            //输出结果:Tue Jun 16 19:29:44 CST 2020
            System.out.println(mapper.writeValueAsString(date));
            //输出结果:"2020-06-16 19:29:44"
        }
    

    重复代码太多,编写工具类实现复用

    public class JsonUtils {
    
        //返回时间
        public static String getJsonTime(Object object) {
            return getJsonTime(object,"yyyy-MM-dd HH:mm:ss");
        }
    
        public static String getJsonTime(Object object,String dateFormat) {
            ObjectMapper mapper = new ObjectMapper();
            //不使用时间差的方式
            mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
            //自定义日期格式对象
            SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
            //指定日期格式
            mapper.setDateFormat(sdf);
            try {
                return mapper.writeValueAsString(object);
            } catch (JsonProcessingException e) {
                e.printStackTrace();
            }
            return null;
        }
    
        //返回json字符串
        public static String getJson(Object object){
            ObjectMapper mapper = new ObjectMapper();
            try {
                return mapper.writeValueAsString(object);
            } catch (JsonProcessingException e) {
                e.printStackTrace();
            }
            return null;
        }
    }
    

    使用FastJson

    Fastjson 是一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象。

    Fastjson 可以操作任何 Java 对象,即使是一些预先存在的没有源码的对象。

    Fastjson 源码地址:https://github.com/alibaba/fastjson

    Fastjson 中文 Wiki:https://github.com/alibaba/fastjson/wiki/Quick-Start-CN

    1. 导入fastjson依赖

      <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
      <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.68</version>
      </dependency>
      
    2. 代码测试

      public static void main(String[] args) throws JsonProcessingException {
              User user1 = new User(1,"xiaoming",5);
              User user2 = new User(2,"xiaoming",6);
              User user3 = new User(3,"xiaoming",7);
              ArrayList<User> users = new ArrayList<>();
              users.add(user1);
              users.add(user3);
              users.add(user2);
              //对象转json字符串
              String str1 = JSON.toJSONString(user1);
              System.out.println("str1:"+str1);
              //输出结果:str1:{"age":5,"id":1,"name":"xiaoming"}
      
              //数组转字符串
              String str2 = JSON.toJSONString(users);
              System.out.println("str2:"+str2);
              //输出结果:str2:[{"age":5,"id":1,"name":"xiaoming"},
          	//{"age":7,"id":3,"name":"xiaoming"},
          	//{"age":6,"id":2,"name":"xiaoming"}]
      
              //字符串转对象
              JSONObject parse = JSON.parseObject(str1);
              Integer id =Integer.valueOf(parse.getString("id"));
              System.out.println("id:"+id);
              //输出结果:id:1
              System.out.println("parse:"+parse);
              //输出结果:parse:{"name":"xiaoming","id":1,"age":5}
              
              //json对象转java对象
              User t = JSON.toJavaObject(parse, User.class);
              System.out.println("t:"+t);
              //输出结果:t:User{id=1, name='xiaoming', age=5}
          }
      

      第三种方法:使用HuTool工具类转换

      JSON在现在的开发中做为跨平台的数据交换格式已经慢慢有替代XML的趋势(比如RestFul规范),我想大家在开发中对外提供接口也越来越多的使用JSON格式。

      不可否认,现在优秀的JSON框架非常多,我经常使用的像阿里的FastJSON,Jackson等都是非常优秀的包,性能突出,简单易用。Hutool开始也并不想自己写一个JSON,但是在各种工具的封装中,发现JSON已经不可或缺,因此将json.org官方的JSON解析纳入其中,进行改造。在改造过程中,积极吸取其它类库优点,优化成员方法,抽象接口和类,最终形成Hutool-json。

      来自官方文档

      介绍 来自官方文档

      Hutool-json的核心类只有两个:

      • JSONObject
      • JSONArray 这与其它JSON包是类似的,与此同时,还提供一个JSONUtil工具类用于简化针对JSON的各种操作和转换。

      除了核心类,还提供了一些辅助类用于实现特定功能:

      • JSONSupport Bean类继承此对象即可无缝转换为JSON或JSON字符串。同时实现了toString()方法可将当前对象输出为JSON字符串。
      • XML 提供JSON与XML之间的快速转换,同时JSONUtil中有相应静态封装。
      • JSON JSONObject和JSONArray共同实现的接口类,JSONUtil.parse方法默认返回此对象(因为不知道是JSON对象还是JSON数组),然后可以根据实际类型判断后转换对象类型。

      与FastJSON类似,JSONObject实现了Map接口,JSONArray实现了List接口,这样我们便可以使用熟悉的API来操作JSON。

      首先还是导入依赖:

      <dependency>
          <groupId>cn.hutool</groupId>
          <artifactId>hutool-all</artifactId>
          <version>5.3.7</version>
      </dependency>
      

      JSONUtil:JSONUtil是针对JSONObject和JSONArray的静态快捷方法集合,

      • 如何使用:parseXXX和toXXX

        public static void main(String[] args) {
                User user1 = new User(1,"xiaoming",2);
                User user2 = new User(2,"xiao",3);
                User user3 = new User(3,"ming",4);
                ArrayList<User> users = new ArrayList<User>();
                users.add(user1);
                users.add(user2);
                users.add(user3);
                String JsonStr1 = JSONUtil.toJsonStr(user1);
                String JsonStr2 = JSONUtil.toJsonStr(users);
                System.out.println("toJsonStr1:"+JsonStr1);
                //输出结果:toJsonStr1:{"name":"xiaoming","id":1,"age":2}
                System.out.println("toJsonStr2:"+JsonStr2);
                //输出结果:toJsonStr2:[{"name":"xiaoming","id":1,"age":2},
                // {"name":"xiao","id":2,"age":3},
                // {"name":"ming","id":3,"age":4}]
                JSONArray jsonArray = JSONUtil.parseArray(JsonStr2);
                System.out.println("jsonArray:"+jsonArray);
                //输出结果:jsonArray:[{"name":"xiaoming","id":1,"age":2},
                // {"name":"xiao","id":2,"age":3},
                // {"name":"ming","id":3,"age":4}]
                JSON parse = JSONUtil.parse(user1);
                System.out.println("parse:"+parse);
                //输出结果:parse:{"name":"xiaoming","id":1,"age":2}
            }
        

      JSONObject

      • 代表一个JSON中的键值对象,这个对象以大括号包围,每个键值对使用,隔开,键与值使用:隔开,一个JSONObject类似于这样:

      • 创建:

        JSONObject json1 = JSONUtil.createObj();
        json1.putOnce("id","1");
        json1.putOpt("name","xiaoming");
        System.out.println("json1:"+json1);
        //输出结果:json1:{"name":"xiaoming","id":"1"}
        
        //JSONUtil.createObj()是快捷新建JSONObject的工具方法,同样我们可以直接new:
        JSONObject json1 = new JSONObject();
        
        1. json1.putOnce源码解释:

          /*
          * 一次性Put 键值对,如果key已经存在抛出异常,如果键值中有null值,忽略
          *
          * @param key   键
          * @param value 值对象,可以是以下类型: Boolean, Double, Integer, JSONArray, JSONObject, Long, String, or the JSONNull.NULL.
          * @return this.
          * @throws JSONException 值是无穷数字、键重复抛出异常
          */
          
        2. putOpt源码解释:

          /**
          * 在键和值都为非空的情况下put到JSONObject中
          *
          * @param key   键
          * @param value 值对象,可以是以下类型: Boolean, Double, Integer, JSONArray, JSONObject, Long, String, or the JSONNull.NULL.
          * @return this.
          * @throws JSONException 值是无穷数字
          */
          
      • 转换

        1. json字符串

          User user1 = new User(1,"xiaoming",2);
          String JsonStr1 = JSONUtil.toJsonStr(user1);
          //方法一:使用工具类转换
          JSONObject jsonObject = JSONUtil.parseObj(JsonStr1);
          System.out.println(jsonObject);
          //{"name":"xiaoming","id":1,"age":2}
          
          //方法二:new的方式转换
          JSONObject jsonObject2 = new JSONObject(JsonStr1);
          System.out.println(jsonObject2);
          //{"name":"xiaoming","id":1,"age":2}
          
        2. 转换

          User user1 = new User(1,"xiaoming",2);
          String JsonStr1 = JSONUtil.toJsonStr(user1);
          //方法一:使用工具类转换
          JSONObject jsonObject = JSONUtil.parseObj(JsonStr1);
          System.out.println(jsonObject);
          //{"name":"xiaoming","id":1,"age":2}
          
          //方法二:new的方式转换
          JSONObject jsonObject2 = new JSONObject(JsonStr1);
          System.out.println(jsonObject2);
          //{"name":"xiaoming","id":1,"age":2}
          
          JSONObject jsonObject1 = JSONUtil.parseObj(user1,false,true);
          // false表示不跳过空值,true表示保持有序
          

          这里会有一个问题时间的转换,HuTool默认也是将时间输出为时间戳自定义需要使用:json.setDateFormat("yyyy-MM-dd HH:mm:ss");

      JSONArray

      • 在JSON中,JSONArray代表一个数组,使用中括号包围,每个元素使用逗号隔开。

      • 创建:

        //方法1
        JSONArray array = JSONUtil.createArray();
        //方法2
        JSONArray array = new JSONArray();
        
        array.add("value1");
        array.add("value2");
        array.add("value3");
        
        //转为JSONArray字符串
        array.toString();
        
      • 转换:

        String jsonStr = "[\"value1\", \"value2\", \"value3\"]";
        JSONArray array = JSONUtil.parseArray(jsonStr);
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值