数据库实训第二天笔记，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-id
        
        var 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>