ajax 01
相关概念
关于网站
**什么是网站？**就是一堆网页 html css js
**程序员开发的网站如何被人看到？**需要把网站的代码放到【服务器】上，用户可以通过网址访问页面
**什么是服务器？**就是计算机用于提供网站服务
客户端-服务器交互模型
网站开发好之后，需要上线（把代码上传到服务器上），客户端（浏览器）需要通过请求的方式访问服务器中的网页，服务器收到请求后，把网页返回给浏览器，然后浏览器把页面呈现出来
客户端（浏览器）发送请求到服务器
服务器返回网页给浏览器用于展示
URL地址格式
URL地址的作用：可以唯一标识服务器中的某个资源
URL地址由3个部分组成:
1.协议：客户端与服务器之间的通讯协议
2.域名：存有该资源的服务器名称，通过他可以找到互联网中对应那台计算机
3.路径：资源在服务器上具体存在地址：告诉客户端文件的地址
服务端资源类型
服务器中所有的可以通过URL地址访问的内容都称之为【资源】--------------------->最重要的是数据资源
每一个URL地址啊对应服务器中的一个资源
浏览器调试工具基本用法
借助浏览器的调试工具，可以直观看到浏览器发送的请求到底返回了什么
Ajax概述
Ajax可以解决什么问题
传统的网站访问方式：客户端发送请求，服务器返回网页，浏览器展示网页
如果长时间服务器没有返回内容，浏览器只能等待（阻塞：白屏）用户体验较差--------->Ajax为解决这个问题
Ajax是什么
Ajax是一种改善浏览网页用户体验的一种技术，通过不阻塞（异步）浏览器发送请求的当时改善体验
Ajax应用场景
1.用户名服务器验证
2.搜索智能提示
3.数据分页显示
基于jQuery的Ajax用法
发送get请求
$.get 主要用于像服务器查询资源
// 需求：点击按钮发送请求到服务器，获取服务器返回的资源，然后更新页面
$('#btn').click(function () {
// 1、发送一个请求给服务器
// $.get的方法参数
// 参数一表示请求的url地址
// 参数二表示回调函数，后端返回数据后自动触发，通过形参获取服务器返回的结果
$.get('http://www.liulongbin.top:3006/api/getbooks', function (result) {
// 2、把返回的数据展示到页面
$('#result').html(result.msg)
})
})
$.get请求传递请求参数
// get 请求如何传递参数
// 1、给按钮绑定单击事件
$('#btn').click(function () {
// 发送get请求时如何传递参数（查询条件）
$('#btn').click(function () {
// 1、发送一个请求给服务器
// $.get的方法参数
// 参数一表示请求的url地址
// 参数二表示回调函数，后端返回数据后自动触发，通过形参获取服务器返回的结果
// url地址中?之后的内容称之为查询字符串
// 查询字符串的格式 ?key1=value1&key2=value2
$.get('http://www.liulongbin.top:3006/api/getbooks?id=74&author=1', function (result) {
// 2、把返回的数据展示到页面
$('#result').html(result.msg)
})
})
// ------------------------------------------------
var id = 74
var author = 1
/*
参数一：表示请求的url地址
参数二：表示请求的get参数
参数三：表示服务器返回成功的回调函数
*/
$.get('http://www.liulongbin.top:3006/api/getbooks', {
id: id,
author: author
},function (result) {
// 2、把返回的数据展示到页面
$('#result').html(result.msg)
})
})
总结：
- $.get方式发送请求的主要目的，为了查询服务器的数据
- 查询数据时可以传递参数
- 自己拼接字符串方式，接到url地址?之后
- 基于$.get方法的参数二传递，参数类型是对象
注意：?之后的那部分参数内容称之为【查询字符串（请求参数）】
发送post请求
post请求的主要目的就是提交数据给服务器
post 提交的参数不会添加到url地址中，而是以【请求体】方式提交
// 发送post请求时如何传递参数（查询条件）
$('#btn').click(function () {
// 添加图书
/*
参数一表示请求的url地址
参数二表示请求参数（提交给服务器的数据）
参数三表示提交成功的回调
*/
$.post('http://www.liulongbin.top:3006/api/addbook', {
author: '施耐庵',
bookname: '水浒传',
publisher: '出版社'
}, function (result) {
$('#result').html(result.msg)
})
})
总结：
- post请求的目的是为了向服务器提交数据
- 通过$.post方法的参数二进行提交数据
- post提交的数据不可以在url地址中看到，但是在Headers的最底部可以看到（请求体）
$.ajax方法用法
$.ajax方法
- type 请求方式 （GET 和 POST），不区分大小写
- url 请求地址
- data 请求参数
- success 服务器返回数据成功的回调函数
// 需求：通过$.ajax方法发送请求
// 1、给按钮绑定单击事件
$('#btn').click(function () {
// 向服务器发送请求
$.ajax({
// 请求方式
type: 'get',
// 请求url地址
url: 'http://www.liulongbin.top:3006/api/getbooks',
// 传递参数
// data: {
// id: 1,
// autor: '吴承恩'
// },
// 成功获取服务器端返回数据的回调函数
success: function (res) {
$('#result').html(res.data.length)
}
})
// -------------------------------------
// $.ajax({
// // 请求方式
// type: 'post',
// // 请求url地址
// url: 'http://www.liulongbin.top:3006/api/addbook',
// // 传递参数
// data: {
// author: '吴军',
// bookname: '浪潮之巅',
// publisher: '出版社'
// },
// // 成功获取服务器端返回数据的回调函数
// success: function (res) {
// $('#result').html(res.msg)
// }
// })
})
总结
- $.ajax既可以发送get请求，也可以发送post请求
- $.ajax 两者皆可
- $.get 专门用于发送get请求
- $.post 专门用于发送post请求
get和post的区别
get主要目的获取服务器的资源，可以传递参数（作为查询条件）
- get请求参数需要用url地址进行传递（?之后的查询字符串 key=value&key1=value1）
- get请求传参有限制：8000个字符
post主要目的向服务器提交数据- post请求参数以请求体方式进行传递，不会添加到URL地址
- 如果要提交的数据量比较大，需要使用post
总结：
- get主要目的是查询数据，但是url地址传递的数据量有限制
- post主要目的是提交数据，具体提交的数据量由后端决定，一般是几M（对于提交表单来说，完全够用）
- 实际上，前端发送请求时，用get或者post谁说了算？后端
后端接口
什么是接口
对于Ajax来说，接口就是指URL地址
接口的核心信息：
请求地址：URL地址
请求方式：get和post
请求参数：get方式通过URL传参，post方式通过请求体传参
响应结果数据：服务端返回的数据
图书管理案例
前端对接后端的流程：
1.处理前端事件监听
2.调用后端接口并获取返回结果
3.处理接口返回的结果
1）查询（客户端渲染：把数据拼接到HTML标签里面）
2)增删改（判断操作成功与否的状态，从而进行后续操作）
页面基本布局
<!-- 添加图书的Panel面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
</div>
<button id="btnAdd" class="btn btn-primary">添加</button>
</div>
</div>
<!-- 图书的表格 -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<script src="./js/jquery-3.5.1.min.js"></script>
获取图书列表数据
//*********************************************调用接口，将图书数据显示在页面
//封装函数
function getBook() {
//调用接口 请求数据库中的数据
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
//需要先判断一下数据是否存在status
if (res.status === 200) {
//数据存在 将数据渲染到页面
//利用拼接字符串
let Tag = ''
//循环遍历数据 将数据拼接成字符串渲染到页面
res.data.forEach(item => {
Tag += `<tr>
<th>${item.id}</th>
<th>${item.bookname}</th>
<th>${item.author}</th>
<th>${item.publisher}</th>
<th ><a href="#" class='del' data-index='${item.id}'>删除</a></th>
</tr>`
});
//将数据重新渲染到页面
$('#tb').html(Tag)
}
})
}
// 调用函数
getBook()
列表渲染数据
let Tag = ''
//循环遍历数据 将数据拼接成字符串渲染到页面
res.data.forEach(item => {
Tag += `<tr>
<th>${item.id}</th>
<th>${item.bookname}</th>
<th>${item.author}</th>
<th>${item.publisher}</th>
<th ><a href="#" class='del' data-index='${item.id}'>删除</a></th>
</tr>`
});
//将数据重新渲染到页面
$('#tb').html(Tag)
添加图书
- 提交表单事件处理
- 获取表单数据
- 调用接口添加图书
- 服务器返回一个添加成功的状态
- 客户端判断状态并且刷新列表并且清空表单
//*******************************************************添加图书
//1.添加监听事件
$('#btnAdd').on('click', function () {
// 2.获取输入框的值 获取数据
let bookname = $('#iptBookname').val()
let author = $('#iptAuthor').val()
let publisher = $('#iptPublisher').val()
//*******************************************************表单验证
if (!bookname || !author || !publisher) {
alert('输入的内容不能为空')
// 终止函数
return
}
// 3.调用接口，把获取到的数据添加到数据库
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname: bookname,
author: author,
publisher: publisher
}, function () {
//此时数据库已经把数据添加成功
//调用函数，重新加载，渲染到页面
getBook()
//输入框数据置空
$('#iptBookname').val('')
$('#iptAuthor').val('')
$('#iptPublisher').val('')
})
})
表单验证
if (!bookname) {
alert('图书名称不能为空')
return
}
if (!author) {
alert('图书作者不能为空')
return
}
if (!publisher) {
alert('图书出版社不能为空')
return
}
删除图书
- 删除图书按钮事件处理
- 通过事件委托方式绑定事件
- (‘tbody’).on(‘click’, ‘a’, function () {})
- 根据图书ID调用后台接口删除图书
- 删除图书接口路径 api/delbook
//***********************************************删除图书
//使用事件委托 找父级
// 1.添加监听事件
$('#tb').on('click', '.del', function () {
// 2.需要找每个删除按钮对应的图书id 自定义属性
let index = $(this).data('index')
// 3.点击删除按钮需要判断是否需要删除 confirm 返回值是Boolean类型的true和false
let flag = confirm('确定要删除吗？')
// 4.调用接口 通过数据库来删除对应的数据 用get方法
$.get('http://www.liulongbin.top:3006/api/delbook', {
id: index
}, function (res) {
//此时数据库已经删除成功
// 判断一下删除成功与否 成功需要重新加载页面 confirm是删除成功
if (confirm) {
//重新加载一下页面 调用函数
getBook()
} else {
alert(res.msg)
}
})
})
1410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
