ajax学习笔记

最新推荐文章于 2023-05-27 17:01:04 发布
最新推荐文章于 2023-05-27 17:01:04 发布
阅读量185 收藏
点赞数
分类专栏： ajax 文章标签： ajax 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46002862/article/details/125984698
版权

ajax学习笔记

服务器相关基本概念

服务器：对外存放和提供资源的电脑
客户端：上网过程，负责获取和消费资源的电脑。

URL地址

URL地址是什么

统一资源定位符，标识互联网上每个资源的唯一存放位置，浏览器只有通过url地址才能正确定位资源的存放位置，从而访问到对应的资源。

URL的组成部分

URL地址一般由三部分组成：

  1. 客户端与服务器端之间的通信协议
  2. 存有该资源的服务器名称
  3. 资源在服务器上具体的存放位置
    http: //www.baidu.com /具体位置

客户端和服务器通信的过程

请求（客户端）–处理（服务器）–响应（服务器）

服务器对外提供了哪些资源

文字，图片，音乐，视频，数据等
对于一个网站来说，HTML是网页的骨架，CSS是网页的颜值，javascript是网页的行为，数据，则是网页的灵魂。

什么是ajax

ajax的基本概念

Ajax的全称是Asynchronous Javascript And XML(异步的JavaScript和xml)，即在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。

为什么要使用Ajax

为了实现网页与服务器之间的数据交互。

ajax的应用场景

用户名检测：注册用户时，通过ajax的形式，动态的检测用户名是否被占用。
搜索提示：当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表。
数据的分页显示：当点击页码的时候，通过ajax的形式，根据页码值动态刷新表格的数据。
数据的增删改查：数据的增删改查操作，都需要通过ajax来实现数据的交互

jQuery中的Ajax函数的使用

初识jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，所以用jQuery对XMLHttpRequest进行封装，jQuery中发起Ajax请求最常用的三个方法如下：

  1. . g e t ( ) ：向服务器请求资源语法： .get()：向服务器请求资源 语法： .get()：向服务器请求资源语法：.get(url,[data],[callback])(方括号中的两个数据代表可选)
    在这里插入图片描述
  2. . p o s t ( ) ：向服务器提交数据语法： .post()：向服务器提交数据 语法： .post()：向服务器提交数据语法：.post(url,[data],[callback])(方括号中的两个数据代表可选)
  3. $.ajax()：
    语法：
$.ajax({
			type:'',//请求的方式，如get或post
			url:'',//请求的url地址
			data:',',这次请求要携带的数据
			success:function(res){//请求成功之后的回调函数
				
			}
		})

$.get()发起不带参数的请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/jquery.js"></script>
	</head>
	<body>
		<button id="btnGet">发起不带参数的get请求</button>

		<script>
			$(function() {
				$('#btnGet').on('click', function() {
					alert("绑好了")
					$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
						console.log(res);
					})
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

$.get()发起带参数的请求

<script>
		$(function(){
			$('#btnGet').on('click',function(){
				$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
					console.log(res)
				})
			})
		})
		</script>

在这里插入图片描述

$.post()提交数据到服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用post提交数据</title>
		<script src="./lib/jquery.js"></script>
	</head>
	<body>
		<button id="btnPost">使用post提交数据</button>
		<script>
		$(function(){
			$("#btnPost").on("click",function(){
				$.post('http://www.liulongbin.top:3006/api/addbook',
				{bookname:'疏忽转',author:'小娜扎',publisher:'t天津出版社'},function(res){
					console.log(res)
				})
			})
		})
		</script>
	</body>
</html>

在这里插入图片描述

使用$.ajax()发起get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/jquery.js"></script>
	</head>
	<body>
		<button id="ajaxGet">使用ajax函数发送get请求</button>
		<script>
		$(function(){
			$('#ajaxGet').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>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/jquery.js"></script>
	</head>
	<body>
		<button id="ajaxPost">使用ajax函数发送post请求</button>
		<script>
		$(function(){
			$('#ajaxPost').on('click',function(){
				$.ajax({
					type:'post',
					url:'http://www.liulongbin.top:3006/api/addbook',
					data:{
						bookname:'世纪',
						author:'司马',
						publisher:'图书出版社'
						},
					success:function(res){
						console.log(res)
					}
				})
			})
		})
		</script>
	</body>
</html>

在这里插入图片描述

接口和接口文档的概念

接口：使用ajax请求数据时，被请求的url地址，就叫做数据接口，每个接口必须要有请求方式，即get,post。
接口文档：调用接口的依赖，包含了对接口URL，参数及输出内容的说明。
接口文档的组成部分：

  1. 接口名称：对接口的简单说明（如登录接口，注册接口）。
  2. 接口URL：接口的调用地址。
  3. 调用方式：如get,post。
  4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称，参数类型，是否必选，参数说明。
  5. 响应格式：接口返回值的详细描述，一般包含数据名称，数据类型，说明三项内容
  6. 返回示例：通过对象的形式，列举服务器返回数据的结构

案例

图书管理

layui+jquery
这里有点问题我始终没搞懂，在我的学习历程中，添加的信息需要放在表单里面提交，在这里我在添加部分加了form标签反而添加不了，也不报错，有懂得大哥在下面回复一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" href="../lib/bootstrap.css" /> -->
		<script src="../lib/jquery.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body style="padding: 15px;">

		<div class="layui-card">
			<div class="layui-card-header" style="background-color: #01AAED;color: white;">添加新图书</div>
			<div class="layui-card-body">
				<div class="layui-form-item">

					<div class="layui-inline">
						<label class="layui-form-label" style="background-color: #D3D4D3;width: 30px">书名</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" id="bookname" name="bookname" required lay-verify="required"
								placeholder="请输入书名" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-inline">
						<label class="layui-form-label" style="background-color: #D3D4D3;width: 30px">作者</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" id="author" name="author" required lay-verify="required"
								placeholder="请输入作者" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-inline">
						<label class="layui-form-label" style="background-color: #D3D4D3;width: 45px">出版社</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" id="publisher" name="publisher" required lay-verify="required"
								placeholder="请输入出版社" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<div class="layui-input-block">
							<button class="layui-btn" id="btnAdd" lay-submit lay-filter="formDemo"
								style="background-color: #01AAED">添加</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<table class="layui-table">
			<h1 align="center">图书列表</h1>
			<colgroup>
				<col width="150">
				<col width="200">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>id</th>
					<th>书名</th>
					<th>作者</th>
					<th>出版社</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tb"></tbody>
		</table>
		
		
		<script>
			$(function() {
				//获取图书列表数据
				function getBookList() {
					// alert("哈哈")
					$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
						// console.log(res)
						if (res.status !== 200) return alert("获取数据失败！")

						var rows = [];
						$.each(res.data, function(i, item) {
							rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' +
								item.author + '</td><td>' + item.publisher +
								'</td><td><a class="del" data-name="' + item.bookname +
								'" data-id="' + item.id + '" href="javascript:;">删除</a></td></tr>')
						})
						$('#tb').empty().append(rows.join(''))
					})
				}
				getBookList();
				//删除图书

				$('#tb').on('click', '.del', function() {
					var bookname = $(this).attr('data-name')
					var id = $(this).attr('data-id')
					// console.log(id)
					$.get('http://www.liulongbin.top:3006/api/delbook', {
						id: id
					}, function(res) {
						alert("确定删除第《" + bookname + "》本书吗")
						if (res.status !== 200) return alert('删除失败！')
						getBookList()
						// alert("删除成功")
					})
				})

//添加图书
				$("#btnAdd").on('click', function() {
					var bookname = $('#bookname').val().trim();
					var author = $('#author').val().trim();
					var publisher = $('#publisher').val().trim();
					if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
						return alert("请填写完整的图书信息")
					}

					$.post('http://www.liulongbin.top:3006/api/addbook', {
							bookname: bookname,
							author: author,
							publisher: publisher
						},
						function(res) {
							if (res.status !== 201) return alert("添加图书失败")
							getBookList()
							$('#bookname').val('');
							$('#author').val('');
							$('#publisher').val('');
						})
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

聊天机器人

<!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>
 				</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" id="input" placeholder="说的什么吧..." class="input_txt" />
 				<input type="button" id="btnSend" value="发 送" class="input_sub" />
 			</div>
 		</div>
		<!-- 播放语音 -->
		<audio src="" id="voice" autoplay style="display: none;"></audio>
		<!-- 滚动条的相关文件 -->
 		<script type="text/javascript" src="js/scroll.js"></script>
		<!-- 用户输入内容实现聊天的相关文件 -->
 		<script src="./js/chat.js"></script>
 	</body>
 </html>


$(function() {
	// 初始化右侧滚动条
	// 这个方法定义在scroll.js中
	resetui()
	
	
	//将用户输入的内容渲染到聊天窗口中
	//为发送按钮绑定鼠标点击事件
	$('#btnSend').on('click',function(){
		var text = $('#input').val().trim()
		if(text.length<=0){
			return $('#input').val('')
		}
		//如果用户输入了聊天内容，就追加到页面上显示
		$('.talk_list').append('<li class="right_word"><img src="img/person02.png"/><span>'+text+'</span></li>')
		$('#input').val('')//清空输入框
		//重置滚动条的位置
		resetui()
		//获取机器人的响应内容
		getMsg(text)
		
	})
	
	
	//获取聊天机器人的内容
	function getMsg(text){
		$.ajax({
			method:'get',
			url:'http://www.liulongbin.top:3006/api/robot',
			data:{
				spoken:text
			},
			success:function(res){
				console.log(res)
				var msg = res.data.info.text
				$('.talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>'+msg+'</span></li>')
				resetui()
				//转语音
				getVoice(msg)
			}
		})
	}
	
	//把文字转语音播放
	function getVoice(msg){
		$.ajax({
			type:'get',
			url:'http://www.liulongbin.top:3006/api/synthesize',
			data:{
				text:msg
			},
			success:function(res){
				console.log(res)
				if(res.status ===200){
					//播放语音
					$('#voice').attr('src',res.voiceUrl)
				}
			}
		})
	}
	//通过点击回车实现发送消息
	//为文本框绑定keyup事件，获取回车键的keyCode码
	$('#input').on('keyup',function(e){
		e.keyCode//获取当前按键的编码
		if(e.keyCode ===13){
			//如果点击了回车，则触发发送的点击事件
			$('#btnSend').click()
		}
	})
})

在这里插入图片描述
图书管理和机器人案例完整代码地址：
https://download.csdn.net/download/weixin_46002862/86263293

代码世界观
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
ajax学习记录
weixin_45090728的博客
03-13 92
ajax学习
Ajax学习日志
Pluto_ssy的博客
05-27 183
jQuery中ajax学习日志，有各种案例和ajax相关内容的用法介绍，结合原生JavaScript和jQuery，内容全面
Ajax 学习笔记
vengu733的博客
07-19 303
AsynchronousJavascriptAndXML异步的JavaScript和xml。AJAX是一种从网页访问Web服务器的异步无刷新技术。为了解决传统的web应用当中"请求"-"等待"-"响应"的整个过程的弊端而出现的一种创新的技术。异步同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。无刷新按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面）......
ajax学习记录总结
GuardianMANGO的博客
04-14 862
Ajax学习记录 URL 地址组成：客户端与服务器之间的通信协议 存有该资源的服务器名称 资源在服务器上具体的存放位置 客户端与服务器通信过程 请求-处理-相应 资源的请求方式 get请求用于获取服务器端资源 post用于向服务器提交数据 什么是Ajax Ajax的全称为Asynchronous Javascript And XML（异步Javascript和XML） 在网页中使用XMLHttpRequest对象和服务器进行数据交互的方式，就是ajax ajax可以实现网页和服务器之间的数据交
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
jquery中ajax学习笔记4
10-28
本节主要介绍两点：1.缓存问题 2.中文问题
Ajax学习笔记
04-22
Ajax学习笔记经典案例，经典知识点，自己的辛苦总结
AJAX学习笔记.docx
最新发布
08-01
AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许网页与服务器进行异步通信，实现页面内容的动态更新，而无需刷新整个页面。
AJax 学习笔记一(XMLHTTPRequest对象)
10-29
今天学习了点关于XMLHttpRequest对象的一些方法和属性，有点体会，在这里也想记录起来。
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
ajax 报表,JQuery Ajax 导出报表
weixin_33121345的博客
08-05 365
利用Ajax发送Get请求js代码$.ajax({type: "GET",url: encodeURI("http://localhost:8080/a?dd=" + dayinList+"),beforeSend: function () {},success: function (msg) {},error: function () {}})后台代码@RestControllerpublic ...
Ajax请求导出Excel的问题
清水的专栏
01-01 2526
1.Ajax请求导出Excel的问题描述： 　　前端发起Ajax请求get或post，后台使用Poi生成excel文件，最后用response输出excel文件流。整个调用过程都没有报任何错，excel文件也生成在本地，但浏览器没有弹出文件下载，毫无反应。 2.解决： 　　开始一直以为是浏览器兼容性，或后台输出文件流代码有问题，调了半天，也都一样，不报任何错。后来上网搜发现在类似的问题，Ajax导出excel没反应，网上有人说不能使用ajax，换成地址重定向 window.location.href.
Ajax(封装笔记第一天)
qq_45433707的博客
04-21 144
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
关于ajax问题,关于ajax的一些小问题
weixin_29910561的博客
08-05 206
ajax跨域传递值是所需要的回传的类型为jsonp$.ajax({url: "http://.......",type: 'GET'，dataType: 'JSONP',//js跨域传值success: function (data) {}});php代码$jsonp = $_GET["callback"];$jj = json_encode($result);echo $jsonp . '(' ...
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值