Ajax学习第一天

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);
                        }
                    }
                })
            }
 
 
        }
    })
 
 
 
 
    // 底部消息编辑区域
 
})

效果图

在这里插入图片描述

posted @ 2022-03-04 23:01 凌歆阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· ajax复习

· ajax学习第二天

· 初识Ajax

· Ajax day01

· ajax - 初步介绍

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Ajax学习第一天

ajax学习第一天

文章目录

1.客户端与服务器

1.1 服务器

1.2 客户端

2. ajax

2.1 ajax的作用

2.2 ajax的应用场景

3. jQuery中的ajax

3.1 $.get()函数的使用

示例：不带参数的get请求

带参数的get请求

3.2 post请求

示例

3.3 $.ajax()函数的使用

示例：ajax的GET请求

示例：ajax实现post请求

3.4 PostMan的使用

示例：使用PostMan实现GET请求

示例：使用PostMan实现POST请求

3.5 接口文档

4. 图示管理案例

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

4.2 案例代码

5. 聊天机器人案例

代码示例

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜

	<!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>

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

	}
	})

	.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;
	}

	$(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);
	}
	}
	})
	}


	}
	})




	// 底部消息编辑区域

	})