Ajax笔记梳理-->json

1.jquery的get和post发放异步请求?
get:

语法: $.get(1.“请求路径”,2.处理响应数据的匿名函数,里面的形参就是服务器返回给客户端的值,3.响应数据的类型(默认是text))
post:

$.post(“1.请求路径”,“2.请求参数”,3.处理响应数据的匿名函数,相应数据的类型(默认是text))

jquery的ajax请求

属性名称解释
url请求的服务器端url地址
async(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
data发送到服务器的数据,可以是键值对形式,也可以是js对象形式
type(默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”
dataType预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等
success请求成功后的回调函数
error请求失败时调用此函数
//声明一个方法使用jQuery的ajax方法发送异步请求
function fn5() {
    $.ajax({
        url:"/demo01", //请求路径
        data:"username=lucy", //请求参数
        type:"POST", //请求方式
        success:function (result) {
            $("#msg").html(result)
        }, //请求成功时候的回调函数
        error:function () {
            $("#msg").html("服务器异常")
        } //请求失败时候的回调函数
    })
}

2.Json数据格式的表现
前端 :{key:value},


3.为什么要用Json,以及Json数据格式如何使用?

  • 在Ajax使用过程中,服务端返回的数据可能比较复杂,比如List<User>;这些数据通常要转换成json格式,把json格式字符串返回客户端
  • 常见的转换工具有:
    • Jackson:SpringMVC内置的转换工具
    • jsonlib:Java提供的转换工具(一般不用)
    • gson:google提供的转换工具(轻量级的框架)
    • fastjson:Alibaba提供的转换工具(效率高速度快)
      fastjson链接:https://pan.baidu.com/s/17D1_OjSRDbge01Vb_ZoUJQ
      提取码:aio7

      jackson链接:https://pan.baidu.com/s/1L6izFuiaDFjyo3XbMHyolw
      提取码:2ytf

      jackson将Java对象转化为json字符串格式的核心方法
  • Jackson提供了转换的核心类:ObjectMapper
  • ObjectMapper的构造方法:无参构造
  • ObjectMapper的常用方法:
方法说明
writeValueAsString(Object obj)把obj对象里的数据转换成json格式

fastjson将Java对象转化为json字符串格式的核心方法

  • fastjson提供了核心类:JSON
  • JSON提供了一些常用的静态方法:
方法说明
toJSONString(Object obj)把obj对象里的数据转换成json格式

搜索案例

在这里插入图片描述


4.Json对象转化成java对象?
------------>jackson字符串转化为java对象

方法功能
readValue(String json, Class type)把json字符串,还原成type类型的Java对象
readValue(String json, TypeReference reference)把json字符串,还原成带泛型的复杂Java对象(比如List)

1.调用JSON.parseObject(String json,Class clazz)

String jsonStr = "{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"}";
        //1.调用JSON.parseObject(String json,Class clazz);
        //转换成user
        User user = JSON.parseObject(jsonStr, User.class);
        System.out.println(user);

2.使用jackson将json数组字符串转换成List

 String jsonStr = "[{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"},{\"id\":2,\"username\":\"ls\",\"password\":\"123456\",\"email\":\"ls@163.com\",\"phone\":\"1386781898\"},{\"id\":3,\"username\":\"ww\",\"password\":\"123456\",\"email\":\"ww@163.com\",\"phone\":\"1386782898\"}]";

        //1.创建ObjectMapper对象
        ObjectMapper objectMapper = new ObjectMapper();

        //2.调用readValue()
        TypeReference<List<User>> ref = new TypeReference<List<User>>() {
        };
        List<User> list = objectMapper.readValue(jsonStr, ref);
        System.out.println(list);

------------>fastjson字符串转化为java对象

方法功能
parseObject(String json, Class type)把json字符串,还原成type类型的Java对象
parseArray(String json, Class type)把json字符串,还原成List

1.使用fastjson将json字符串转换成JavaBean对象或者Map

   //把json转成JavaBean(user对象)
    public void test08() throws IOException {
        String jsonStr = "{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"}";

        //1.调用JSON.parseObject(String json,Class clazz);
        User user = JSON.parseObject(jsonStr, User.class);
        System.out.println(user);

2.//使用fastjson将json数组的字符串,转换成List

 String jsonArr = "[{\"id\":1,\"username\":\"奥巴马\",\"password\":\"123456\",\"email\":\"123456@qq.com\",\"phone\":\"18999999999\"},{\"id\":2,\"username\":\"周杰棍\",\"password\":\"654321\",\"email\":\"654321@qq.com\",\"phone\":\"18666666666\"},{\"id\":3,\"username\":\"王丽红\",\"password\":\"777777\",\"email\":\"777777@qq.com\",\"phone\":\"18777777777\"}]";

    List<User> userList = JSON.parseArray(jsonArr, User.class);

    for (User user : userList) {
        System.out.println(user.getUsername());
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<body> <style> .demo-login-container{width: 320px; margin: 21px auto 0; margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> </div> </form> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果,仅作演示用 layer.alert(JSON.stringify(field), { title: '当前填写的字段值' }); // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 }); }); </script> </body>在上面的代码中需要添加一行文字:高压氧和一张自定义的图片A
06-11

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值