AJAX基本&&JSON基础

快来打我* 2024-03-27 12:59 74阅读 0赞

**目录**

一、AJAX概述

二、AJAX快速入门

三、案例——使用AJAX验证用户名是否存在

四、Axios框架

五、JSON

5.1 JSON概述

5.2 JSON基础语法

5.3 JSON数据和Java对象转换

5.4 案例——查询所有（AJAX、JSON）

5.5 案例——新增品牌

--------------------

## 一、AJAX概述 ##

![928dcc3a62e34ed1a04a5ba5088ac2ca.png][]

![68fd9123001b4567b2d746bf0187eb8e.png][]

![5035dfec83834f1c80ee77b501dd3424.png][]

![885595fd87dc4e6ea57d3e32603070f0.png][]

## 二、AJAX快速入门 ##

![00ff14b32b3e4b1ebd4fc3e5742178ac.png][]

## 三、案例——使用AJAX验证用户名是否存在 ##

![1c861f69f6b14dc7aee23e15dcd396b9.png][]

SelectUserSevlet伪代码：

@WebServlet("/selectUserServlet")
    public class SelectUserServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            //1. 接收用户名
            String username = request.getParameter("username");
    
            //2. 调用service查询User对象
    
            boolean flag = true;//模拟用户名存在
    
            //3. 响应标记
            response.getWriter().write("" + flag);
    
    
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎注册</title>
        <link href="css/register.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="login.html">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
    
            <table>
    
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                    </td>
    
                </tr>
    
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
    
    
                <tr>
                    <td>验证码</td>
                    <td class="inputs">
                        <input name="checkCode" type="text" id="checkCode">
                        <img src="imgs/a.jpg">
                        <a href="#" id="changeImg">看不清？</a>
                    </td>
                </tr>
    
            </table>
    
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    
    </div>
    
    <script>
    
        //1. 给用户名输入框绑定 失去焦点事件
        document.getElementById("username").onblur = function () {
            //2. 发送ajax请求
            // 获取用户名的值
            var username = this.value;
    
            //2.1. 创建核心对象
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.2. 发送请求
            xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
            xhttp.send();
    
            //2.3. 获取响应
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    //alert(this.responseText);
                    //判断
                    if(this.responseText == "true"){
                        //用户名存在，显示提示信息
                        document.getElementById("username_err").style.display = '';
                    }else {
                        //用户名不存在 ，清除提示信息
                        document.getElementById("username_err").style.display = 'none';
                    }
                }
            };
    
        }
    
    
    
    
    </script>
    </body>
    </html>

## 四、Axios框架 ##

![8f3897fed45f4589993ae49478f77078.png][]

Servlet：

@WebServlet("/axiosServlet")
    public class AxiosServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            System.out.println("get...");
    
            //1. 接收请求参数
            String username = request.getParameter("username");
            System.out.println(username);
    
            //2. 响应数据
            response.getWriter().write("hello Axios~");
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            System.out.println("post...");
            this.doGet(request, response);
        }
    }

HTML页面：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="js/axios-0.18.0.js"></script>
    
    <script>
        // //1.get
        // axios({
        //     method:"get",
        //     url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
        // }).then(function (resp){
        //     alert(resp.data);
        // })
    
        //1.post
        axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan",
            data:"username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        })
    
    </script>
    
    </body>
    </html>

![8c23cfa260d041b79a8da21c94def78f.png][]

![8c82d2a333e04e63bb913b5ac617a0d4.png][]

## 五、JSON ##

### 5.1 JSON概述 ###

![727b69ea97c64b82a7a56bf0c8f397ae.png][]

### 5.2 JSON基础语法 ###

![61fb744057e54deda202e143fa220fde.png][]

### 5.3 JSON数据和Java对象转换 ###

![6df0f3df295f42338933ec440cb58d24.png][]

![4910975b3bdf4906b9da154dc32fd1ed.png][]

public class FastJsonDemo {
    
        public static void main(String[] args) {
            //1.将Java对象转为JSON字符串
            User user = new User();
            user.setId(1);
            user.setUsername("zhangsan");
            user.setPassword("123");
    
            String jsonString = JSON.toJSONString(user);
    
            System.out.println(jsonString);
    
    
            //2.将JSON字符串转为Java对象
    
            User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}",User.class);
    
            System.out.println(u);
    
        }
    }

### 5.4 案例——查询所有（AJAX、JSON） ###

![4820c2da5c184f218fc66f1bc48fb4f0.png][]

Servlet：

@WebServlet("/selectAllServlet")
    public class SelectAllServlet extends HttpServlet {
        private BrandService brandService = new BrandService();
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.调用Service查询
            List<Brand> brands = brandService.selectAll();
    
            //2.将集合转换为JSON数据    序列化
            String jsonString = JSON.toJSONString(brands);
    
            //3.响应数据
            response.setContentType("text/json;charset=utf-8");
            response.getWriter().write(jsonString);
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

brand.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </table>
    
    <script src="js/axios-0.18.0.js"></script>
    
    <script>
       //1.当页面加载完成后，发送AJAX请求
       window.onload = function (){
           //2.发送ajax请求
           axios({
               method:"get",
               url:"http://localhost:8080/brand-demo/selectAllServlet"
           }).then(function (resp){
                //获取数据
               let brands = resp.data;
               let tableData = "<tr>\n" +
                   "        <th>序号</th>\n" +
                   "        <th>品牌名称</th>\n" +
                   "        <th>企业名称</th>\n" +
                   "        <th>排序</th>\n" +
                   "        <th>品牌介绍</th>\n" +
                   "        <th>状态</th>\n" +
                   "        <th>操作</th>\n" +
                   "    </tr>";
    
               for (let i = 0; i < brands.length; i++) {
                   let brand = brands[i];
    
                   tableData +=" <tr align=\"center\">\n" +
                       "        <td>"+(i+1)+"</td>\n" +
                       "        <td>"+brand.brandName+"</td>\n" +
                       "        <td>"+brand.companyName+"</td>\n" +
                       "        <td>"+brand.ordered+"</td>\n" +
                       "        <td>"+brand.description+"</td>\n" +
                       "        <td>"+brand.status+"</td>\n" +
                       "\n" +
                       "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                       "    </tr>"
               }
               //设置显示表格数据
               document.getElementById("brandTable").innerHTML = tableData;
           })
       }
    
    
    </script>
    
    
    </body>
    </html>

### 5.5 案例——新增品牌 ###

![946c004e78cb460bb0357e8898f18a11.png][]

Servlet：

@WebServlet("/addServlet")
    public class AddServlet extends HttpServlet {
    
        private BrandService brandService = new BrandService();
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            //1. 接收数据,request.getParameter 不能接收json的数据
           /* String brandName = request.getParameter("brandName");
            System.out.println(brandName);*/
    
            // 获取请求体数据
            BufferedReader br = request.getReader();
            String params = br.readLine();
    
            // 将JSON字符串转为Java对象
            Brand brand = JSON.parseObject(params, Brand.class);
    
    
            //2. 调用service 添加
            brandService.add(brand);
    
            //3. 响应成功标识
            response.getWriter().write("success");
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

html页面：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
    </head>
    <body>
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" name="brandName"><br>
        企业名称：<input id="companyName" name="companyName"><br>
        排序：<input id="ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" value="0">禁用
        <input type="radio" name="status" value="1">启用<br>
    
        <input type="button" id="btn"  value="提交">
    </form>
    
    <script src="js/axios-0.18.0.js"></script>
    
    <script>
        //1.给button按钮绑定单击事件
        document.getElementById("btn").onclick = function (){
    
            //将表单数据转为json
            var formData = {
                brandName: "",
                companyName: "",
                ordered: "",
                description: "",
                status: ""
            }
    
            //获取表单数据
            let brandName = document.getElementById("brandName").value;
            //设置数据
            formData.brandName = brandName;
    
            //获取表单数据
            let companyName = document.getElementById("companyName").value;
            //设置数据
            formData.companyName = companyName;
    
            //获取表单数据
            let ordered = document.getElementById("ordered").value;
            //设置数据
            formData.ordered = ordered;
    
            //获取表单数据
            let description = document.getElementById("description").value;
            //设置数据
            formData.description = description; //获取表单数据
    
            let status = document.getElementsByName("status");
            for (let i = 0; i < status.length; i++) {
                if (status[i].spellcheck){
                    //
                    formData.status = status[i].value;
                }
            }
    
            console.log(formData);
            //2.发送ajax请求
            axios({
                method:"post",
                url:"http://localhost:8080/brand-demo/addServlet",
                data:formData
            }).then(function (resp){
                //判断响应数据是否为success
                if (resp.data == "success"){
                    //成功则跳转到品牌列表
                    location.href = "http://localhost:8080/brand-demo/brand.html"
                }
            })
        }
    </script>
    </body>
    </html>

[928dcc3a62e34ed1a04a5ba5088ac2ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7355fa329fc94432987b6e590505bc47.png
[68fd9123001b4567b2d746bf0187eb8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/11b45fffc3d84452890ea6a11552b6c0.png
[5035dfec83834f1c80ee77b501dd3424.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/314c753bb99046ae8c4d11b931f13e04.png
[885595fd87dc4e6ea57d3e32603070f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/84810df66b784dc0b8be52e48b03a337.png
[00ff14b32b3e4b1ebd4fc3e5742178ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d5cc2a3414da43a5b9197f7a7138fc01.png
[1c861f69f6b14dc7aee23e15dcd396b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/817aee9e184744f29243502407f458d9.png
[8f3897fed45f4589993ae49478f77078.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f3947d42656e411387197b093271c9d5.png
[8c23cfa260d041b79a8da21c94def78f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/959f5d0387134fc580ec2a16232ab539.png
[8c82d2a333e04e63bb913b5ac617a0d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a21ef1f799dc452ba4024c5289525426.png
[727b69ea97c64b82a7a56bf0c8f397ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c847678136e247798ef4ba4f41fe8a35.png
[61fb744057e54deda202e143fa220fde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/161da65e5fe5442492f6bbf126c203fd.png
[6df0f3df295f42338933ec440cb58d24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/df927552a9574c7198854b7ab3161dee.png
[4910975b3bdf4906b9da154dc32fd1ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f34fcc9fe4da44ba86357805f3523cf7.png
[4820c2da5c184f218fc66f1bc48fb4f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9a7af2ba1b864855b4e7bc28b26cde49.png
[946c004e78cb460bb0357e8898f18a11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/cd984158e4ef435e94c61b009bdbf9c4.png