Day01-Ajax

发布时间:2023年12月27日

一.JSON方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <script>
        var data = [
            {
                "id": "0001",
                "name": "张三",
                "age": 18,
                "gender": "男"
            },
            {
                "id": "0002",
                "name": "李四",
                "age": 20,
                "gender": "女"
            },
            {
                "id": "0003",
                "name": "王五",
                "age": 18,
                "gender": "男"
            }
        ]

        console.log(data);

        // 将数组对象形式的数据转换为 json 格式
        var dataStr = JSON.stringify(data);
        console.log(dataStr);

        // 将 json 格式的数据转换为数组对象形式
        var data2 = JSON.parse(dataStr);
        console.log(data2);


        var table = document.querySelector("table");
        data2.forEach(function (value, index) {
            table.innerHTML += `<tr>
                                    <td>${value.id}</td>
                                    <td>${value.name}</td>
                                    <td>${value.age}</td>
                                    <td>${value.gender}</td>
                                </tr>`
        })

    </script>

</body>

</html>

二.Ajax使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

        // 2.Ajax向服务器发起请求  open("请求方式","请求地址")
        xhr.open("GET", URL);
        xhr.open("POST", URL);

        // 3.设置请求头

        // GET请求不需要设置请求头

        // post请求需要设置请求头
        // 默认格式 (窗体格式)    ?userName=1234&psd=abcd
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // json格式
        xhr.setRequestHeader("Content-Type", "application/json");

        // 4.发送请求
        // get的一般不用send
        xhr.send(null);
        // post方法携带传递信息
        xhr.send(content);
        // name="田鹏鹏"&age=18
        // {"name":"田鹏鹏","age":18}

        // 5.获取响应,监听请求状态的改变
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                console.log("请求完成");

                // 完善的判断信息
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    console.log("请求成功");

                    // 拿到响应信息
                    console.log(xhr.response);
                    // 响应正文
                    console.log(xhr.responseText);

                    // ... 

                    var data = JSON.parse(xhr.responseText);

                    // ... 
                }
            }
        }

        
    </script>

</body>

</html>

三.get请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text"><button class="search">搜索</button><button>添加</button>

    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th>班级</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>手机号</th>
            <th>地址</th>
            <th>备注</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
    </table>

    <script>

        // 获取table
        var table = document.querySelector("table");
        // 获取搜索框
        var search = document.querySelector("input");
        // 获取搜索按钮
        var sbtn = document.querySelector(".search");

        var data;
        sbtn.onclick = function () {
            if (search.value) {
                data = search.value;
            } else {
                data = "";
            }

            table.innerHTML = `<tr>
                                <th>班级</th>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>爱好</th>
                                <th>手机号</th>
                                <th>地址</th>
                                <th>备注</th>
                                <th>日期</th>
                                <th>操作</th>
                            </tr>`;

            // 1.创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 2.发起请求 open()
            xhr.open("GET", "http://localhost:3008/api/student/getStudent?id=" + data);

            // 3.设置请求头

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

            // 5.监听状态改变 onreadystatechange()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                        console.log(xhr.responseText);      // json
                        var data = JSON.parse(xhr.responseText);
                        console.log(data);

                        data.forEach(function (value) {
                            table.innerHTML += `<tr>
                                        <td>${value.clazz}</td>
                                        <td>${value.id}</td>
                                        <td>${value.name}</td>
                                        <td>${value.gender}</td>
                                        <td>${value.age}</td>
                                        <td>${value.hobby}</td>
                                        <td>${value.tel}</td>
                                        <td>${value.address}</td>
                                        <td>${value.remark}</td>
                                        <td>${value.date}</td>
                                        <td>
                                            <button>编辑</button>
                                            <button>删除</button>
                                        </td>
                                    </tr>`
                        })
                    }
                }
            }
        }



    </script>

</body>

</html>

四.post请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./05-ajax封装.js"></script>
</head>

<body>

    <script>

        // // 1.创建 XMLHttpRequest 对象
        // var xhr = new XMLHttpRequest();

        // // 2.发起请求 open()
        // xhr.open("POST", "http://localhost:3008/api/student/addStudent");

        // // 3.设置请求头
        // // 窗体格式  "?name='张三'&age=18"
        // // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        // xhr.setRequestHeader("Content-Type", "application/json");

        // // 4.发送请求 send()
        // // 必传参数: clazz班级 name 姓名  gender 性别 age 年龄 tel 电话 address 地址信息 remark 备注信息
        // // var data = "clazz='火花239'&name='丁方园'&age=23&tel=13888888888&address='兰考'&remark='游戏大神'"

        // var data = [
        //     {
        //         calzz: "火花239",
        //         name: "胡定海",
        //         age: 60,
        //         tel: 13666666666,
        //         address: "信阳",
        //         remark: "信阳彭于晏"
        //     }
        // ]
        // xhr.send(JSON.stringify(data));

        // // 5.监听 
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState === 4) {
        //         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        //             console.log(xhr.response);
        //         }
        //     }
        // }

        var data = {
            calzz: "火花239",
            name: "侯志强",
            age: 18,
            tel: 13666666666,
            address: "信阳",
            remark: "信阳彭于晏"
        }
        postData(data, "http://localhost:3008/api/student/addStudent", function (xhr) {
            console.log(xhr.response);
        })

    </script>

</body>

</html>

五.Ajax封装

// 封装get请求
function getData(data, url, fun) {
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    if (!data.includes("=")) {
        data = formData(data);
    }
    url += "?" + data;
    // 2.发起请求
    xhr.open("GET", url);

    // 3.发送请求
    xhr.send();

    // 4.监听状态改变
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                fun(xhr);
            }
        }
    }
}


// 数据转换为窗体格式
function formData(data) {
    var arr = [];
    for (var key in data) {
        arr.push(key + "=" + data[key]);
    }
    data = arr.join("&");
    return data;
}


// 封装 post 请求
function postData(data, url, fun) {
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    // 2.发起请求
    xhr.open("POST", url);
    // 设置请求头
    if (data instanceof Object) {
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(data));
    } else {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    // 4.监听状态改变
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                fun(xhr);
            }
        }
    }
}

文章来源:https://blog.csdn.net/Spirs/article/details/135168538
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。