JSON AJAX

最新推荐文章于 2024-05-06 17:12:55 发布

大珍珠是光

最新推荐文章于 2024-05-06 17:12:55 发布

阅读量279

点赞数

分类专栏： JavaWeb 文章标签： json javascript ajax

本文链接：https://blog.csdn.net/czdzz/article/details/125892748

版权

JavaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JSON

JSON（JavaScript Object Notation）翻译为JavaScript对象，这是JS语言的对象表示形式，常用项目前后端之间的信息交互

* java对象表示形式
    User user = new User();
    user.setUsername("后羿");
    user.setAge(23);
    user.setSex("男");
			
* javaScript对象(JSON)表示形式
    {
        "username":"后羿",
        "age":"23",
        "sex":"男",
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json和ajax</title>
    <script type="text/javascript">
        /**
         * JSON数据格式：
         *     介绍：
         *        他就是按照固定格式定义javascript对象
         *     格式：
         *        {key:value,key:value....}
         *        例如：
         *          let user = {id:1,name:"张三",age:18,gender:"男"};
         *        注意：
         *          在定义json时，不要使用双引号写在大括号外面。
         *          当我们使用双引号写在大括号外面之后，输出Json时看到的就不是object了，那么此时表示就不是json对象。
         *          因此，也就不能使用对象.属性调用Json里的属性获取值了。
         *        细节：
         *           在javascript中定义json，key都是字符串类型的，可以不用写引号引起来。
         *           在java中，必须用双引号把key引起来。
         *       值支持的数据类型：
         *          基本类型和String
         *          数组类型
         *          json类型
         *          例如：
         *              定义学生成绩列表数据
         */
        //1.json数据格式的基本定义
        let user = {id:1,name:'张三',age:18,gender:'男'};
        let user2 = {"id":1,"name":'张三',"age":18,"gender":'男'};
        //当被js识别成json对象时，他是输出的是一个object。当是object时，可以是对象.属性的方式来获取值。
        //alert(user);
        //alert(user.id);
        //alert(user.gender);
        alert(user2.name);
		
        //2.定义多种类型组合的json
        let students = [
            {id:1,name:"老王",scores:[{category:"语文",score:90},{category:"数学",score:91},{category:"英语",score:92}] },
            {id:2,name:"test",scores:[{category:"语文",score:70},{category:"数学",score:71},{category:"英语",score:72}] }
        ];
        //alert(students[1].name);
        //alert(students[1].scores[2].score);

        //3.定义分页相关json对象
        let pageInfo = {
            total:50,
            pages:10,
            pageSize:5,
            pageNum:1,
            list:[
                {id:1,name:"老王",scores:[{category:"语文",score:90},{category:"数学",score:91},{category:"英语",score:92}] },
                {id:2,name:"test",scores:[{category:"语文",score:70},{category:"数学",score:71},{category:"英语",score:72}] }
            ]
        };
       // alert(pageInfo);
    </script>
</head>
<body>

</body>
</html>

Java对象转换JOSN对象

导入Josn坐标

 <!--引入jackson坐标-->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.9.0</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.0</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.9.0</version>
</dependency>

package com.itheima.test;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.domain.User;
import lombok.ToString;
import org.junit.Test;

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

/**
 * JSON数据格式的转换：
 *    我们采用的是jackson组件
 *    他自动和springmvc集成了。等到springmvc的使用，两个注解就够了。
 *    现在不行，需要学习他里面的对象和方法：
 *          1个对象
 *              ObjectMapper
 *          2个方法
 *              writeValueAsString()    把一个java对象转成json字符串
 *              readValue()             把一个json字符串解析成java对象
 */
public class JsonTransferTest {

    /**
     * 把java实体类对象转成json
     */
    @Test
    public void testDomain()throws Exception{
        User user = new User(1,"隔壁老王","男","北京","test@itcast.cn");
        //1.创建转换对象
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(user);
        System.out.println(json);
    }

    /**
     * 把List集合对象转成json
     */
    @Test
    public void testList()throws Exception{
        User u1 = new User(1,"隔壁老王1","男","北京","test@itcast.cn");
        User u2 = new User(2,"隔壁老王2","男","北京","test@itcast.cn");
        User u3 = new User(3,"隔壁老王3","男","北京","test@itcast.cn");

        List<User> users = new ArrayList<>();
        users.add(u1);
        users.add(u2);
        users.add(u3);

        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(users);
        System.out.println(json);
    }


    /**
     * 把Map集合对象转成json
     */
    @Test
    public void testMap()throws Exception{
        User u1 = new User(1,"隔壁老王1","男","北京","test@itcast.cn");
        User u2 = new User(2,"隔壁老王2","男","北京","test@itcast.cn");
        User u3 = new User(3,"隔壁老王3","男","北京","test@itcast.cn");

        Map<String,User> map = new HashMap<>();
        map.put("u1",u1);
        map.put("u2",u2);
        map.put("u3",u3);

        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(map);
        System.out.println(json);
    }
}

JOSN转Java对象

    /**
     * 把json转成实体类对象
     */
    @Test
    public void testJsonToDomain()throws Exception{
        String json = "{\"id\":1,\"name\":\"隔壁老王1\",\"gender\":\"男\",\"address\":\"北京\",\"email\":\"test@itcast.cn\"}";
        ObjectMapper objectMapper = new ObjectMapper();
        User user = objectMapper.readValue(json, User.class);
        System.out.println(user);
    }

AJAX

AJAX(Asynchronous JavaScript and XML)异步的 JavaScript 和 XML

发送get请求：
axios.get(请求的地址?请求的参数).then(function(参数){
});


发送post请求：
axios.post(请求的地址,请求的参数).then(function(参数){
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的使用</title>
    <!--要想使用axios，必须先导入他的js文件-->
    <script type="text/javascript" src="/js/axios-0.20.0.js"></script>
    <!--编写js代码，在页面加载时，给超链接绑定点击事件，然后通过axios向服务器发送异步请求-->
    <script type="text/javascript">
        window.onload = function () {
            document.querySelector("#testAxios").onclick = function () {
                /**
                 * axios的使用：
                 *    涉及的对象：
                 *       在引入的js文件中定义好了一个对象：axios。
                 *    涉及的方法：
                 *       get(请求的地址,请求参数的json)：用于发送get请求
                 *       post(请求的地址，请求的参数)：用于发送post请求
                 *       then()：当服务器执行完成后，前端要做的事情
                 *               then方法中要定义一个function(){}用于处理响应。
                 *               function在声明时需要提供一个参数：一般名称就是resp。
                 *               这个resp他是一个json对象。
                 *                   它里面有一个属性data：这就是服务器的响应数据
                 */

                //发送get请求：不携带参数
                // axios.get("/axios").then(function (resp) {
                //     alert(resp);
                // })

                //发送get请求：携带参数
                // axios.get("/axios?username=张三&age=18").then(function (resp) {
                //     alert(resp);
                // })

                //发送get请求：携带很多参数时
                // axios.get("/axios",{
                //     params:{
                //         username:"老王",
                //         age:20
                //     }
                // }).then(function (resp) {
                //     alert(resp);
                // })

                //发送post请求：不携带参数
                // axios.post("/axios").then(function (resp) {
                //     alert(resp);
                // })

                //发送post请求：不携带参数
                // axios.post("/axios","username=ee395&age=30").then(function (resp) {
                //     alert(resp.data);
                // })

                axios.post("/axios","username=ee395&age=30").then(resp=> {
                    alert(resp.data);
                })
            }
        }
    </script>
</head>
<body>
<a href="#" id="testAxios">测试异步交互</a>
</body>
</html>