Ajax学习第一天

最新推荐文章于 2024-07-18 21:11:52 发布

凌歆

最新推荐文章于 2024-07-18 21:11:52 发布

阅读量280

点赞数

分类专栏： ajax 文章标签：学习 ajax

本文链接：https://blog.csdn.net/qq_33938234/article/details/123287048

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ajax学习第一天

1.客户端与服务器

1.1 服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

在这里插入图片描述

1.2 客户端

上网过程中，负责获取和消费资源的电脑，叫做客户端

在这里插入图片描述

2. ajax

Ajax（异步JavaScript和XML）
网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax

2.1 ajax的作用

轻松实现网页与服务器之间的数据交互

2.2 ajax的应用场景

在这里插入图片描述

3. jQuery中的ajax

jQuery对浏览器提供的XMLHttpRequest进行了封装，简化了ajax的使用复杂度
jQuery中发起Ajax请求的最常用的三个方法
- $.get()
- $.post()
- $.ajax()

3.1 $.get()函数的使用

专门用于发起get请求，请求服务器上的资源到客户端
语法格式

$.get(url,[data],[callback])

url:请求资源的地址，必填
data：请求资源时携带的参数,参数类型是对象（Object）
请求成功时的回调函数

示例：不带参数的get请求

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <button>发起不带参数的get请求</button>
    <script>
        $(function() {
            $("button").on("click", function() {
                // 发起get请求
                // res为服务器的返回
                $.get("http://www.liulongbin.top:3006/api/getbooks", function(res) {
                    console.log(res);
                });
            })
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

带参数的get请求

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <button>发起带参数的get请求</button>
    <script>
        $(function() {
            $("button").on("click", function() {
                // 发起get请求
                // res为服务器的返回
                $.get("http://www.liulongbin.top:3006/api/getbooks", {
                    id: 1
                }, function(res) {
                    console.log(res);
                });
            })
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

3.2 post请求

专门用于发起post请求，从而向服务器提交数据
语法格式

$.post(url,[data],[callback])

url:提交数据的地址
data:要提交的数据
callback:提交成功的回调函数

示例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <button>发起post请求</button>

    <script>
        $(function() {
            $.post("http://www.liulongbin.top:3006/api/addbook", {
                bookname: '斗破苍穹',
                author: '天蚕土豆',
                publisher: '上海图书出版社'
            }, function(res) {
                console.log(res);
            })
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

3.3 $.ajax()函数的使用

功能比较综合的函数，可以GET，也可以POST
语法规则：

$.ajax({
    type:"请求方式",
    url:"请求地址",
    data:{
        携带的数据
    },
    // 成功时回调函数
    success:function(res){
        
    }
})

示例：ajax的GET请求

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <button>ajax的get请求</button>

    <script>
        $("button").on("click", function() {
            $.ajax({
                type: "GET",
                url: "http://www.liulongbin.top:3006/api/getbooks",
                data: {
                    id: 1
                },
                success: function(res) {
                    console.log(res);
                }
            })
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

示例：ajax实现post请求

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <button>ajax的post请求</button>

    <script>
        $(function() {
            $("button").on("click", function() {
                $.ajax({
                    type: "POST",
                    url: "http://www.liulongbin.top:3006/api/addbook",
                    data: {

                        bookname: '斗罗大陆',
                        author: '唐家三少1',
                        publisher: '上海图书出版社'

                    },
                    success: function(res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>

</html>

效果图

在这里插入图片描述

3.4 PostMan的使用

下载地址

示例：使用PostMan实现GET请求

方法图

在这里插入图片描述

示例：使用PostMan实现POST请求

效果图

在这里插入图片描述

3.5 接口文档

图解

在这里插入图片描述

4. 图示管理案例

插件安装（使用Bootstrap渲染页面）

在这里插入图片描述

4.1 一些Bootstrap的快捷键（配合插件使用）

生成面板
```
bs3-panel
```
生成按钮

bs3-btn

生成输入框

bs3-input

生成表格

bs3-table

4.2 案例代码

样式表

.input-group {
    margin-right: 60px !important;
    /* flex: 1; */
}

.panel-body {
    display: flex !important;
    justify-content: flex-start !important;
}

.panel-body .btn {
    width: 7%;
}

.panel .container {
    margin-left: 0px !important;
}

.panel .table {
    width: 96%;
}

a:hover {
    text-decoration: none !important;
    color: red !important;
}

html与css

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <link rel="stylesheet" href="./css/图示管理.css">
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <!-- 添加图书标题 -->
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>

        <!-- 添加图书的内容 -->
        <div class="panel-body ">

            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">图书名称</span>
                <input type="text" class="form-control" placeholder="书名" aria-describedby="sizing-addon2">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">作者</span>
                <input type="text" class="form-control" placeholder="作者" aria-describedby="sizing-addon2">
            </div>
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">出版社</span>
                <input type="text" class="form-control" placeholder="出版社" aria-describedby="sizing-addon2">
            </div>


            <button type="button" class="btn btn-primary">  添加  </button>


        </div>


        <!-- 表格区域 -->
        <div class="container">
            <table class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>图书名称</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>2</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr> -->
                </tbody>
            </table>
        </div>



    </div>

    <script>
        $(function() {
            // 根据id查询
            var id1;
            // 存储客户端的数据
            var books = {};
            getBookOnClient(id1, books);

            //在服务器上获取书籍,有id，选择某一个，无id，选择多个
            function getBookOnServer(id1, books) {
                console.log(id1);
                $.get("http://www.liulongbin.top:3006/api/getbooks", {
                    id: id1
                }, function(res) {
                    $.extend(true, books, res);

                    getBook(books);
                })
            }

            // 在本地获取书籍信息
            function getBookOnClient(id1, books) {
                var b = $.isEmptyObject(books);

                if (b) {
                    getBookOnServer(id1, books);
                    // console.log(1);
                } else {
                    getBook(books);
                    // console.log(2);
                }

            }

            // 本地获取书籍
            function getBook(books) {
                $(".table tbody").html("");
                var aData = [];
                aData = books.data;
                aData.sort(function(a1, b1) {
                    return b1.id - a1.id;
                });
                // console.log(aData);

                /* 
                
                    这里可以采用字符串拼接的方式生成标签

                */
                for (var i = 0; i < aData.length; i++) {
                    var td1 = $("<td>" + aData[i].id + "</td>");
                    var td2 = $("<td>" + aData[i].bookname + "</td>");
                    var td3 = $("<td>" + aData[i].author + "</td>");
                    var td4 = $("<td>" + aData[i].publisher + "</td>");
                    var td5 = $("<td><a href='javascript:;' id='" + i + "'>删除</a></td>");

                    var tr = $("<tr></tr>");
                    tr.append(td1).append(td2).append(td3).append(td4).append(td5);

                    $(".table tbody").prepend(tr);

                }
            }


            // 表单添加书籍
            $(".btn").on("click", function() {
                var num = 0;
                $(".input-group input").each(function(index, ele) {
                    if ($(ele).val() !== "") {
                        num++;
                    } else {
                        alert("请输入完整的信息")
                        return false;
                    }
                })

                if (num === 3) {
                    addBook($(".input-group").eq(0).children("input").val(), $(".input-group").eq(1).children("input").val(), $(".input-group").eq(2).children("input").val())
                        // console.log(num);
                        // console.log($(".input-group input").eq(0).val());
                }
            })



            // 添加书籍到服务器
            function addBook(bookname1, author1, publisher1) {
                $.post("http://www.liulongbin.top:3006/api/addBook", {
                    bookname: bookname1,
                    author: author1,
                    publisher: publisher1
                }, function(res) {

                    // console.log(books);
                    // console.log(res);
                    if (res.status == 201) {
                        alert("添加图书成功");
                        var length = books.data.length;
                        console.log(length);
                        var obj = {
                            id: length + 1,
                            bookname: bookname1,
                            author: author1,
                            publisher: publisher1
                        }
                        books.data.push(obj);
                        getBook(books);

                        // books.data.push(obj);
                        // getBook(books);
                    } else if (res.status == 502) {
                        alert("添加图书失败");
                    }

                })
            }

            // 在本地删除书籍
            $(".table tbody").on("click", "tr td a", function() {
                var index = $(this).attr("id");
                console.log(index);
                delBook(books, index);
            })

            function delBook(books, index) {
                books.data.splice(index, 1);
                getBook(books)
            }

            console.log(books);
        })
    </script>

</body>

</html>

效果图

在这里插入图片描述

效果图

在这里插入图片描述

5. 聊天机器人案例

需求

在这里插入图片描述

代码示例

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <title>聊天机器人</title>
</head>

<body>
    <div class="wrap">
        <!-- 头部 Header 区域 -->
        <div class="header">
            <h3>小思同学</h3>
            <img src="img/person01.png" alt="icon" />
        </div>
        <!-- 中间 聊天内容区域 -->
        <div class="main">
            <ul class="talk_list" style="top: 0px;">
                <li class="left_word">
                    <img src="img/person01.png" /> <span>你好</span>
                </li>
                <li class="right_word">
                    <img src="img/person02.png" /> <span>你好哦</span>
                </li>
            </ul>
            <div class="drag_bar" style="display: none;">
                <div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
            </div>
        </div>
        <!-- 底部 消息编辑区域 -->
        <div class="footer">
            <img src="img/person02.png" alt="icon" />
            <input type="text" placeholder="说的什么吧..." class="input_txt" />
            <input type="button" value="发 送" class="input_sub" />
        </div>
    </div>

    <!-- 音频标签，播放机器人音频 -->

    <audio src="" autoplay style="display: none;" class="voice"></audio>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script src="./js/char.js"></script>
</body>

</html>

js部分

$(function() {
    // 初始化右侧滚动条
    // 这个方法定义在scroll.js中
    resetui();

    // 底部消息编辑区域

    $(".footer .input_txt").on("keyup", function(e) {
        console.log(e);
        if (e.keyCode === 13) {
            $(".footer .input_sub").click();
        }
    })

    // 绑定发送按钮事件

    $(".footer .input_sub").click(function() {
        var text = $(".footer .input_txt").val().trim();
        if (text.length === 0) {
            $(".footer .input_txt").val("");
            return false;
        } else {
            var li = $("<li class='right_word'><img src='img/person02.png'/><span>" + text + "</span></li>");
            $(".talk_list").append(li);
            $(".footer .input_txt").val("");

            // 自动滑倒底部
            resetui();

            // 机器人回复

            // 获取文字
            $.ajax({
                method: "GET",
                url: "http://www.liulongbin.top:3006/api/robot",
                data: {
                    spoken: text,
                },

                success: function(res) {
                    // 判断是否返回成功
                    if (res.message === "success") {
                        var reText = res.data.info.text;
                        // console.log(reText);
                        var li = $('<li class="left_word"><img src="img/person01.png" /> <span>' + reText + '</span></li>');
                        $(".talk_list").append(li);
                        resetui();
                        getVoice(reText);
                    }


                }
            })

            // 获取语音信息
            function getVoice(reText) {
                $.ajax({
                    method: "GET",
                    url: "http://www.liulongbin.top:3006/api/synthesize",
                    data: {
                        text: reText,
                    },

                    success: function(res) {
                        if (res.status === 200) {
                            $(".voice").attr("src", res.voiceUrl);
                            // console.log(res);
                        }
                    }
                })
            }


        }
    })




    // 底部消息编辑区域

})

效果图

在这里插入图片描述

凌歆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习第一天

ajax学习第一天文章目录ajax学习第一天1.客户端与服务器1.1 服务器1.2 客户端2. ajax2.1 ajax的作用2.2 ajax的应用场景3. jQuery中的ajax3.1 $.get()函数的使用示例：不带参数的get请求带参数的get请求3.2 post请求示例3.3 $.ajax()函数的使用示例：ajax的GET请求示例：ajax实现post请求3.4 PostMan的使用示例：使用PostMan实现GET请求示例：使用PostMan实现POST请求3.5 接口文档4. 图示管理案
复制链接

扫一扫