2.2.3.1 AJAX&JSON, 请求方式, json数据格式, 解析和类型转换, JsonIgnore,JsonFormat注解

最新推荐文章于 2022-12-17 10:34:01 发布

CH_ENN

最新推荐文章于 2022-12-17 10:34:01 发布

阅读量419

点赞数

删除

本文链接：https://blog.csdn.net/chengh1993/article/details/109704208

版权

1) 编写Servlet代码并挂载至tomcat

4.4.5 java对象转换为json数据类型

代码: 封装User类, 使用@JsonIgnore, @JsonFormat注解

代码: java对象转换为json数据类型

第1章 ajax概述

1.1. ajax概念

Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

1.2. ajax 功能

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交
换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传
统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升用户的体验。

1.3. AJAX的应用场景

数据校验
按照需求获取数据
自动更新页面内容

1.4. 同步与异步

两种方式的区别主要体现在客户端和服务器端相互通信的基础上。

同步方式：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。
异步方式：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。

第2章 js原生的ajax

2.1.原生的ajax的开发步骤

1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据

2.2. js-ajax的代码实现

1) 编写Servlet代码并挂载至tomcat

package com.lg.web;

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;

/**
 * @author CH
 * @date 2020/11/10 13:46
 *
 *      编写Servlet, 能够接收用户的请求 , 还可以返回一些响应
 */

@WebServlet("/DemoServlet")

public class DemoServlet extends HttpServlet {

    //客户端发送get方式的请求, 由该方法处理
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    // post方法的请求, 由下面处理
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=utf-8");
        System.out.println("服务器已经接收到客户端的请求...");
        // 接收前端传递的参数
        String username = req.getParameter("username");
        String age = req.getParameter("age");
        System.out.println("username = " + username + ", age = " + age);
        // 给客户返回消息
        resp.getWriter().print("hello...");
    }
}

2) 编写前台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  需求: 点击一个按钮, 发送一个ajax请求到后台, 并且给前台页面返回一个hello  -->

    <script>
        //发送ajax请求的方法
        function send() {
            // 1）创建Ajax引擎对象
            var xhr = new XMLHttpRequest();

            // 2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
            xhr.onreadystatechange = function () {
                // readyState 执行的状态  1 2 3 4 (响应结束)
                // status 响应码 200  代表服务器响应成功
                if(xhr.readyState == 4 && xhr.status == 200) {
                    // 5）接受响应数据
                    alert(xhr.responseText);
                }
            }

            // 3）绑定提交地址
            // get代表请求方式, url 请求后台服务器的资源路径; 是否为异步请求(true 是, false 不是)
            xhr.open("GET", "/demo_ajax_war_exploded/DemoServlet", true);

            // 4）发送请求
            xhr.send();

        }
    </script>
</head>
<body>
    <input type="button" value="发送ajax请求" onclick="send()"/>
</body>
</html>

第3章 jQuery方式的ajax

3.1. jQuery方式ajax简介

jquery是一个优秀的js类库，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法，开发中经常使用的有三种：

3.2. GET请求方式

通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能，如需复杂的ajax参数设置请使用$.ajax。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  需求: 点击一个按钮, 发送一个ajax请求到后台, 并且给前台页面返回一个hello  -->
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        function send() {
            //发送ajax请求
            // 格式: $.get(url, [data], [callback], [type])

            /*
                参数解释
                    url: 必填, 请求服务器的地址
                    data: 发送给服务器的参数 key=value, 服务器可以根据key值获取value
                    callback: 回调函数, 服务器响应完毕函数执行, 形参data表示服务器返回数据
                    type: 代表服务器返回的数据类型 常用两个: text,json
            */
            $.get("/demo_ajax_war_exploded/DemoServlet", "username=tom", function (data) {
                alert(data);
            }, "text");

        }
    </script>
</head>
<body>
    <input type="button" value="发送ajax请求" onclick="send()"/>
</body>
</html>

3.3. POST请求方式

通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能，如需复杂的ajax参数设置请使用$.ajax。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  需求: 点击一个按钮, 发送一个ajax请求到后台, 并且给前台页面返回一个hello  -->
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        function send() {
            //发送ajax请求
            // 格式: $.get(url, [data], [callback], [type])

            /*
                参数解释
                    url: 必填, 请求服务器的地址
                    data: 发送给服务器的参数 key=value, 服务器可以根据key值获取value
                    callback: 回调函数, 服务器响应完毕函数执行, 形参data表示服务器返回数据
                    type: 代表服务器返回的数据类型 常用两个: text,json
            */
            $.post("/demo_ajax_war_exploded/DemoServlet", "username=rose", function (data) {
                alert(data);
            }, "text");

        }
    </script>
</head>
<body>
<input type="button" value="发送ajax请求" onclick="send()"/>
</body>
</html>

3.4 AJAX请求方式

通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  需求: 点击一个按钮, 发送一个ajax请求到后台, 并且给前台页面返回一个hello  -->
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        function send() {
            /*
                ajax方式注意事项:
                    1, 参数位置可互换
                    2, 有些参数不写也有默认值,如async

                ajax发送请求的格式:
                $.ajax({
                    url : "后台地址",
                    async : true,
                    data : "username=tom&age=18",
                    type : "post",
                    datatype : "text",
                    success : function(data) {

                    },
                    error : function() {

                    }
                })
            */
            $.ajax({
                url : "/demo_ajax_war_exploded/DemoServlet",
                async : true,
                data : "username=jack&age=18",
                type : "post",
                datatype : "text",
                success : function(data) {
                    alert(data);
                },
                error : function() {
                    alert("执行失败");
                }
            })

        }
    </script>
</head>
<body>
<input type="button" value="发送ajax请求" onclick="send()"/>
</body>
</html>

第4章 json数据格式

4.1. json的概念

json的全称叫做：JavaScript object Notation，JavaScript对象表示法。
json现在主要的功能是：用于存储和交换文本信息的语法，进行数据的传输。
json的主要优点：JSON 比 XML 更小、更快、更易解析。