JavaWeb——AJAX、JSON

最新推荐文章于 2022-10-05 17:52:34 发布

Ajekseg

最新推荐文章于 2022-10-05 17:52:34 发布

阅读量91

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： ajax json javascript 后端 cocos2d

本文链接：https://blog.csdn.net/Ajekseg/article/details/124812344

版权

面试同时被 3 个专栏收录

130 篇文章 0 订阅

订阅专栏

阿里巴巴

122 篇文章 2 订阅

订阅专栏

学习路线

117 篇文章 0 订阅

订阅专栏

1.AJAX快速入门

AJAX 简介 (w3school.com.cn)[这里是图片004]https://www.w3school.com.cn/js/js_ajax_intro.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1.创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet", true);
    xhttp.send();

    //3.获取响应
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
           alert(this.responseText);
        }
    }
</script>

</body>
</html>

import java.io.IOException;

@javax.servlet.annotation.WebServlet("/ajaxServlet")
public class AjaxServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        //响应数据
        response.getWriter().write("hello ajax");
    }
}

2.案例：使用AJAX验证用户名是否存在

<!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) {
                if (this.responseText == "true") {
                    //用户名存在，显示提示信息
                    document.getElementById("username_err").style.display = "";
                } else {
                    //用户名不存在，隐藏提示信息
                    document.getElementById("username_err").style.display = "none";
                }
            }
        }
    }
</script>
</body>
</html>


@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.接受用户名
        String username = request.getParameter("username");

        //2.调用service查询用户名是否存在（此处模拟查询结果）
        boolean flag = true;

        //3.响应标记
        response.getWriter().write("" + flag);
    }
}

3.Axios异步框架

<!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);
    })

    //2.post
    axios({
        method: "post",
        url: "http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=lisi"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>

</body>
</html>


@WebServlet("/axiosServlet")
public class AxiosServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //2.响应数据
        response.getWriter().write("hello " + username + "!");
    }
}

<!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);
    // })
    axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
        alert(resp.data);
    })
    //
    // //2.post
    // axios({
    //     method: "post",
    //     url: "http://localhost:8080/ajax-demo/axiosServlet",
    //     data:"username=lisi"
    // }).then(function (resp) {
    //     alert(resp.data);
    // })
    axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=lisi").then(function (resp) {
        alert(resp.data);
    })


</script>

</body>
</html>

@WebServlet("/axiosServlet")
public class AxiosServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");
        //2.响应数据
        response.getWriter().write("hello " + username + "!");
    }
}

案例：失焦显示“用户名已存在”

<!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 src="js/axios-0.18.0.js"></script>
<script>
    //1.绑定失去焦点时间
    document.getElementById("username").onblur = function () {
        axios({
            method: "get",
            url:"http://localhost:8080/ajax-demo/selectUserServlet?username=zhangsan"
        }).then(function (resp) {
            if (resp.data = "true") {
                //！！！！！！！！！！！注意是用=表示判断！！！！！！！！！！！！
                //用户名存在，显示提示信息
                document.getElementById("username_err").style.display = "";
            } else {
                //用户名不存在，隐藏提示信息
                document.getElementById("username_err").style.display = "none";
            }
        })
    }

</script>
</body>
</html>

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.接受用户名
        String username = request.getParameter("username");

        //2.调用service查询用户名是否存在（此处模拟查询结果）
        boolean flag = true;

        //3.响应标记
        response.getWriter().write("" + flag);
    }
}

4.JSON

JSON基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var json={
        "name":"zhangsan",
        "age":23,
        "addr":["北京","上海","广州"]
    }

    alert(json.name)
</script>

</body>
</html>

JSON数据和Java对象转换

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

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);//{"iD":1,"password":"123","username":"zhangsan"}

        //2.json字符串转java对象
        User u = JSON.parseObject(jsonString, User.class);
        System.out.println(u);//User{ID=1, username='zhangsan', password='123'}
    }
}

5.Axios + JSON案例：完成品牌列表数据查询和添加

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/selelcrAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData = "    <tr>
" +
                "        <th>序号</th>
" +
                "        <th>品牌名称</th>
" +
                "        <th>企业名称</th>
" +
                "        <th>排序</th>
" +
                "        <th>品牌介绍</th>
" +
                "        <th>状态</th>
" +
                "        <th>操作</th>
" +
                "    </tr>";//表头

            for (let i = 0; i < brands.length; i++) {
                let brand = brands[i];
                tableData += "    <tr align="center">
" +
                    "        <td>" + (i + 1) + "</td>
" +
                    "        <td>" + brand.brandName + "</td>
" +
                    "        <td>" + brand.companyName + "</td>
" +
                    "        <td>" + brand.ordered + "</td>
" +
                    "        <td>" + brand.description + "</td>
" +
                    "        <td>" + brand.status + "</td>
" +
                    "        <td><a href="#">修改</a> <a href="#">删除</a></td>
" +
                    "    </tr>"
            }
            //设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }
</script>
</body>
</html>

addBrand.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.绑定单击事件
    document.getElementById("btn").onclick = function () {
        //2.表单数据转json
        //2.1定义json对象
        var formData = {
            "brandName": "",
            "companyName": "",
            "ordered": "",
            "description": "",
            "status": ""
        };

        //2.2获取并设置表单数据
        let brandName = document.getElementById("brandName").value;
        let companyName = document.getElementById("companyName").value;
        let ordered = document.getElementById("ordered").value;
        let description = document.getElementById("description").value;
        formData.brandName = brandName;
        formData.companyName = companyName;
        formData.ordered = ordered;
        formData.description = description;
        let status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if (status[i].checked) {
                formData.status = status[i].value;
            }
        }

        console.log(formData);
        axios({
            method: "post",
            url: "http://localhost:8080/brand-demo/addServlet",
            data: formData
        }).then(function (resp) {
            if (resp.data = "success") {
                location.href = "http://localhost:8080/brand-demo/brand.html"
            }
        })
    }
</script>
</body>
</html>

SelectAllServlet

@WebServlet("/selelcrAllServlet")
public class SelelcrAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    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);

    }
}

AddServlet

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接受request请求体
        BufferedReader reader = request.getReader();
        String s = reader.readLine();
        //2.把请求体转对象
        Brand brand = JSON.parseObject(s, Brand.class);
        //3.调用service添加
        brandService.add(brand);
        //4.响应标识
        response.getWriter().write("success");

    }
}

Ajekseg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——AJAX、JSON

1.AJAX快速入门AJAX 简介 (w3school.com.cn)[这里是图片004]https://www.w3school.com.cn/js/js_ajax_intro.asp<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&l..
复制链接

扫一扫

专栏目录