数据库实训第二天笔记，jQuery的补充和ajax的学习和案例

jQuery补充

jQuery 事件

dom：

<ul><li class="li1">li li</li><li class="li2">li li</li><li class="li3">li li</li>
</ul>
<button>按钮</button>
<a href="http://baidu.com" index="1">aa</a>

1、事件基础写法

$('button').click(function(){console.log('我是按钮')
})

2、事件的升级写法（类似js）

// on 的第一个参数是：事件名
$('button').on('click',function(){console.log('我是一个按钮')
})

3、事件的升级写法

第二个参数（事件委托，事件委托适用场景1）//网页的设计很多很多的使用事件委托，因为网页是动态生成的。

// 需求：给 li 的子元素绑定单独的事件，需要先绑定父级
// 第二个参数：子元素的选择器（类名、id、标签）
// 这种写法叫：事件委托。
// 就是将事件交给父级，交父级之后，点击子元素，由父级分配这个事件(点击谁)
// 事件委托适用场景1：想给每一个子元素都绑定事件
$('ul').on('click','li',function(){console.log($(this))
})

不委托写法

// 给每个事件绑定$('ul li').click(function(){console.log($(this))})

事件委托适用场景2

 // 如果是动态添加的 li ，通过 click 方法是不能给动态元素绑定（传统写法）$('ul li').click(function(){console.log($(this))})//  动态添加的元素，只有使用事件委托的方式才能绑定事件$('ul').on('click','li',function(){console.log($(this))})//append 就是向某个元素中追加内容$('ul').append('<li> 我是追加的 li</li>')

jQuery 属性操作

设置或获取元素固有属性值 prop()。

dom：

<a href="http://baidu.com" index="1">aa</a>

1、获取元素的固有属性（元素本身自带的属性）

console.log($('a').prop('href'))

2、给元素固定的苏醒设置罪行的属性值

// 第一个参数：需要设置的属性
// 第二个参数：最新的属性值
$('a').prop('href','http://fanyi.baidu.com')

3、获取自定义的属性

console.log($('a').attr('index'))

4、给自定义属性设置属性值

$('a').attr('index',2)

循环、遍历

dom:

<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>

script中的遍历：

// 之前的隐式迭代(同时获取同名，同类型的标签，对同一元素做同一操作)
// $('div').css('background','skyblue')

需求：给同一类元素做不同操作，就需要遍历：

// .each 就是 jQuery中的遍历方法
// .each 接受一个函数作为参数，函数有两个参数
// 第一个参数，索引。第二个参数，js中的DOM对象//数组定义颜色
const arr =['skyblue','orange','pink']$('div').each(function(index,domEle){// console.log(arr[index]) // 通过索引获取arr中的每一个颜色// domEle 是DOM对象，不能直接调用jQuery对象，需要先转换成jQuery对象$(domEle).css('background',arr[index])
})

对数组的遍历

var heroList=['亚索','阿狸','盖伦']// 主要用来对数据进行遍历：数组
// 第一个参数：需要遍历的数据
// 第二个参数：函数，函数中也有俩个参数
//   1、索引：index
//   2、遍历的数据的每一项：item、element
$.each(heroList,function(index,item) {console.log(item)
})
var object={name: '亚索',age: 10
}// 对对象进行遍历
// 函数的第一个参数：对象的属性
// 函数的第二个参数：对象的属性值
$.each(object,function(index,item) {// 如果遍历的是对象，index 打印出来的时序性console.log(index)// item 是属性值console.log(item)
})

模板字符串

字符串写法存在的问题:

1、字符串拼接很犯错
2、字符串拼接没有换行，不方便阅读

var str='亚索'
console.log('<li>'+ str + '</li><li>' + str +'</li>')

解决方案：模板字符串 (就是加强型的字符串)

// 模板字符串使用的是反引号 （键盘1左边的按键）
var str=`亚索`// 在模板字符串中如何使用变量 ${变量}
console.log(`
<li>亚索${str}
</li>`)

AJAX

什么是AJAX？

Ajax 的全称是 Asynchronous Javascript And XML (异步 JavaScript 和 XML ).
通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax。
jQuery 中的 AJAX

jQuery 中发起Ajax 请求最常用的三个方法如下:

$.get)

$.post()

$.ajax()

jQuery 中 $.get()函数的功能单一，专门用来发起get 请求，从而将服务器上的资源请求到客户端来进行使用。

$(function() {
// $.get() 方法，用来想服务器请求（获取）数据资源// $.get()有三个参数
// 第一个参数：请求的资源地址
// 第二个参数：需要传递给服务器的资源，非必填
// 第三个参数：函数，函数里有一个参数
// 1、请求的资源地址返回的数据
$.get('http://www.liulongbin.top:3006/api/getbooks',function (res) {console.log(res)})
})

post使用方法，使用 HTTP POST 请求从服务器加载数据：

$("button").click(function(){    $.post("demo_test.html",function(data,status){        alert("Data: " + data + "nStatus: " + status);    });});

发送一个 HTTP GET 请求到页面并取回结果：

$("button").click(function(){$.get("/try/ajax/demo_test.php",function(data,status){alert("数据: " + data + "\n状态: " + status);});
});

接口

使用 Ajax 请求数据时，被请求的URL地址，就叫做数据接口〈简称接口)。同时，每个接口必须有请求方式。

通过GET方式请求接口的过程

通过POST方式请求接口过程

接口文档

顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对候口URL，参数以及输出内容的说明,我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

接口文档组成成分

1.接口名称:

用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。接口URL:接口的调用地址。
3.调用方式:

接口的调用方式，如GET或 POST.
4.参数格式:

接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。5.响应格式:接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
6.返回示例(可选)︰

通过对象的形式，例举服务器返回数据的结构。
图书管理系统案例

接口：/* */中的内容即为真实接口文档

请求的根路径

图书列表

接口URL： http://www.liulongbin.top:3006/api/getbooks
调用方式： GET
参数格式：

参数名称	参数类型	是否必选	参数说明
id	Number	否	图书Id
bookname	String	否	图书名称
author	String	否	作者
publisher	String	否	出版社

响应格式：

数据名称	数据类型	说明
status	Number	200 成功；500 失败；
msg	String	对 status 字段的详细说明
data	Array	图书列表
+id	Number	图书Id
+bookname	String	图书名称
+author	String	作者
+publisher	String	出版社

返回示例：

{"status": 200,"msg": "获取图书列表成功","data": [{ "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },{ "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },{ "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }]
}

添加图书

接口URL： http://www.liulongbin.top:3006/api/addbook
调用方式： POST
参数格式：

参数名称	参数类型	是否必选	参数说明
bookname	String	是	图书名称
author	String	是	作者
publisher	String	是	出版社

响应格式：

数据名称	数据类型	说明
status	Number	201 添加成功；500 添加失败；
msg	String	对 status 字段的详细说明

返回示例：

{"status": 201,"msg": "添加图书成功"
}

删除图书

接口URL： http://www.liulongbin.top:3006/api/delbook
调用方式： GET
参数格式：

参数名称	参数类型	是否必选	参数说明
id	Number	是	图书Id

响应格式：

数据名称	数据类型	说明
status	Number	200 删除成功；500 未指定要删除的图书Id；501 执行Sql报错；502 要删除的图书不存在；
msg	String	对 status 字段的详细说明

返回示例：

{"status": 200,"msg": "删除图书成功！"
}

完整案例实现：

<!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"><title>Document</title><link rel="stylesheet" href="./lib/bootstrap.css" />
</head><body style="padding: 15px;"><!-- 添加图书的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"><!-- <tr><td>1</td><td>西游记</td><td>吴承恩</td><td>北京图书出版社</td><td><a href="javascript:;" class="del" data-id="1">删除</a></td></tr> --></tbody></table><!-- 导入jQuery --><script src="./js/jquery.js"></script><script>$(function() {// 1、获取图书列表，渲染表格// 1、1 获取图书列表// $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){//   console.log(res)// })// 为什么需要这段代码使用函数包裹？// 因为这段代码要经常使用，不使用函数，复用很麻烦function getBookList() {$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){console.log(res.data)// 1、2 根据服务器响应的数据动态的渲染 tr，往 tbody 真难搞进行添加内容 （append）// 数据不够直接方法哦页面中，需要将数据填充到 tr 中// 有多少数据渲染多少 tr// 需要将返回的数据进行遍历，遍历以后，就能生成 n 个 tr// 我么需要将服务器返回的数据在动态的拼接到 tr 中$.each(res.data, function (index, item) {$('#tb').append(`<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><a href="javascript:;" class="del" data-id="${item.id}">删除</a></td></tr>`)})})}getBookList()// 2、实现删除图书的功能// 2、1 给删除按钮绑定点击事件（因为列表是动态生成的，所以需要使用事件委托）$('#tb').on('click','.del',function() {// 2、2 获取当前删除项的 id （id 是唯一的）// 通过自定义属性的方式获取的 id ，在 a 标签上绑定了 data-idvar id=$(this).attr('data-id')// 2、3 调用 ajax ，从服务器删除图书$.ajax({url: 'http://www.liulongbin.top:3006/api/delbook',type: 'GET',data: {id: id},success: function(res) {// 解决一个bug，append  =会一直进行追加，所以我们在获取最新数据之前，先将 他body清空$('#tb').html()// 删除成功后，重新获取数据，页面更新getBookList()// 删除功能，给用户弹窗提示alert(res.msg)}})})// 3、实现添加功能// 3、1 给添加按钮绑定点击事件$('#btnAdd').click(function() {// 3、2 获取图书名、作者、出版社var bookname=$('#iptBookname').val().trim()var author=$('#iptAuthor').val().trim()var publisher=$('#iptPublisher').val().trim()// 3、3 判断用户有没有输入图书名、作者和出版社，如果没有输入，不发请求if (bookname === '' || author === '' || publisher ===''){// return 能阻止继续运行return alert('请输入内容')}// 3、4 如果用户全部输入，提交，发送 ajax$.ajax({url: 'http://www.liulongbin.top:3006/api/addbook',type: 'POST',data: {bookname: bookname,author: author,publisher: publisher},success: function(res) {// 添加完成，刷新列表$('#tb').html()getBookList()// 提示添加结果alert(res.msg)// 3.5 清空文本框内容$('input:text').val('')}})})})</script></body></html>

数据库实训第二天笔记，jQuery的补充和ajax的学习和案例相关推荐

javaweb实训第二天上午——jQuery笔记
jQuery基础 JQuery的认识 JS框架概述 JQuery优势和原生JS比较 JQuery的基本使用 jQuery库引入 <script type="text/javascri ...
javaweb实训第二天上午——jQuery基础
文章目录课程介绍 1.jQuery介绍 1.1.jQuery的认识 1.2.和原生js比较 1.2.1.获取结点 1.2.2.Ajax处理 1.3.1.3.其他js库或js框架 2.使用jQuery ...
sqlserver实验心得体会_SQLServer数据库实训总结
SQLServer 数据库实训总结为期一周的实训已经结束,从这一周中,有了很多的感悟.从学到和掌握到的东西来说,在书本上学到的东西非常不牢固, 然而实训真的让我受益匪浅! 实训第一天到教室时, ...
头歌MySQL数据库实训答案2022
答案由本人收集+自己写的,仅作参考,帮助写不完作业的小伙伴目录实训1 数据库.表与完整性约束的定义(Create) 实训2 数据库.表与完整性约束的定义(Create) 实训3 基于金融应用的数据 ...
数据库实训心得体会_数据库实习个人总结
数据库实训心得体会篇一一个月的数据库实训就转眼间就上完了,期间讲解了一个学生管理系统,最后还做了一个小的数据库链接作业.现在就说说关于vb链接的数据库的一些方法. 首先说数据库,简单的说就是建表格 ...
oracle安装实训心得,oracle数据库实训心得.docx
oracle数据库实训心得 Oracle实训总结系别:信管院班级:姓名:浦江峰学号: 日期:XX年12月21日实训总结: 由于感到oracle实训担子很重,而自己的学识.能力和阅历与其任职都有一 ...
实训第二天的收获beep~~~
今天是实训第二天,桂老师开始讲解C#的基础知识,相较于昨天的各种理论,今天的知识点明显好掌握一些,所以听的也比较有动力. 上午的时候主要讲了控制台的一些属性方法,还有命名法,下午才是重头戏,一直没有理 ...
mysql实验总结范文_数据库实训心得
一个月的数据库实训就转眼间就上完了,期间讲解了一个学生管理系统,最后还做了一个小的数据库链接作业.现在就说说关于vb链接的数据库的一些方法. 首先说数据库,简单的说就是建表格,然后把一张一张的表格和在 ...
java mysql实训报告_java数据库实训总结.doc
java数据库实训总结 java数据库实训总结篇一:JAVA数据库学生管理系统实训报告实训报告实训名称: 学生成绩管理系统实训系 (部):专业班级:网络L1301学生姓名:刘鑫学号指导教师 ...