01-Ajax第一天学习笔记

1. url(统一资源定位符)

1. url一般由三部分组成：(1)客户端与服务器之间的通信协议(2)存有该资源的服务器名称(3)资源在服务器上具体的存放位置

2. 网页的打开过程

1. 客户端请求-处理-服务器响应

3. 什么是Ajax？

1. Ajax的全称是Asynchronous javascript And XML(异步JavaScript和XML)

4. jQuery中的Ajax

1. 发起请求的方法：
   1. $.get(url,data,callback),url:要请求的资源地址；data:请求资源期间要携带的参数；callback：请求成功时的回调函数
   2. $.post(url,data,callback)，url:提交数据的地址；data:提交的数据；callback：提交成功时的回调函数
   3. $.ajax({type:请求的方式,url:请求的地址,data:请求期间要携带的参数,success：请求成功时的回调函数})

    // get发送不带参数的请求
    $(function () {
        $('#btnGET').on('click',function () {
           $.get('http://www.liulongbin.top:3006/api/getbooks',function (e) {
                console.log(e)
           })
        })
    })
    // get发送带参数的请求,即返回指定参数的数据
    $(function () {
        $('#btnGET').on('click',function () {
           $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function (e) {
                console.log(e)
           })
        })
    })
    // post发送请求
    $(function () {
      $('#btnPOST').on('click', function() {
        $.post('http://www.liulongbin.top:3006/api/addbook',{bookname: '吴晗确实憨批', author: '他爹', publisher: 'lz出品'},function(res) {
            console.log(res)
        })
      })
    })
    // ajax发送get请求
    $(function () {
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET/POST',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data: {
            id: 1
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })

5. 接口

1. 概念：使用Ajax请求数据时，被请求的url的地址，就叫做数据接口
2. 接口文档：接口的说明文档，是我们调用接口的依据。好的接口文档包含了对接口url，参数以及输出内容的说明。
3. 接口文档组成部分：
   1. 接口名称
   2. 接口url
   3. 调用方式
   4. 参数格式：每个参数必须包含参数名称，参数类型，是否必选，参数说明四项内容
   5. 响应格式：一般包含数据名称，数据类型，说明三项内容
   6. 返回示例(可选)

图书管理

  $(function () {
            // 获取图书列表
            function getBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
                    // 判断状态码
                    if(res.status !== 200) return alert('获取图书失败')

                    // 声明一个空数组
                    let row = []
                    // 渲染表格
                    $.each(res.data,function(i,item) {
                        row.push(`
                            <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>
                        `)
                    })
                    //将数组拆分 
                    $('#tb').empty().append(row.join(''))
                })
            }
            getBookList()

            // 删除操作
            $('tbody').on('click','.del',function() {
                let uid = $(this).attr('data-id')
                // console.log(id);
                $.get('http://www.liulongbin.top:3006/api/delbook',{id:uid},function(res) {
                    if(res.status !== 200) return alert('删除图书失败')
                    getBookList()
                })
            })

            // 添加图书
            $('#btnAdd').on('click',function() {
                const bookname = $('#iptBookname').val().trim()
                const author = $('#iptAuthor').val().trim()
                const publisher = $('#iptPublisher').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()
                    $('#iptBookname').val('')
                    $('#iptAuthor').val('')
                    $('#iptPublisher').val('')
                })
            })
        })

聊天机器人

  $(function() {
    // 初始化右侧滚动条
  // 这个方法定义在scroll.js中
  resetui()

// 为发送按钮绑定点击事件
    $('#btnSend').on('click', function() {
        const text = $('#ipt').val().trim()
        if(text.length <= 0)
        return $('#ipt').val('')

        // 将输入的内容追加到聊天框
        $('.talk_list').append(`
            <li class="right_word">
                <img src="img/person02.png" /> <span>${text}</span>
            </li> 
        `)
        $('#ipt').val('')
        // 重置滚动条的位置
        resetui()
        getMsg(text)
    })

    // 通过回车发送消息
$('#ipt').on('keyup', function(e) {
    // console.log(e);
    if(e.key === "Enter") {
        // 调用发送按钮的点击事件
        $('#btnSend').click()
    }
})

// 获取机器人发送回来的消息
function getMsg(text) {
    $.ajax({
        method:'GET',
        url: 'http://www.liulongbin.top:3006/api/robot',
        data: {
            spoken: text
        },
        success: function(res) {
            console.log(res);
            if(res.message === 'success') {
                // 接受聊天消息
                let msg = res.data.info.text
                // 聊天框追加内容
                $('.talk_list').append(`
                    <li class="left_word">
                        <img src="img/person01.png" /> <span>${msg}</span>
                    </li>
                `)
                resetui()
                voice(msg)
            } 
        }
    })
}

    // 语言播放机器人信息
    function voice(text) {
        $.ajax({
            method:'GET',
            url: 'http://www.liulongbin.top:3006/api/synthesize',
            data: {
                text: text
            },
            success: function(res) {
                console.log(res);
                if(res.status === 200) {
                    $('#voice').attr('src',res.voiceUrl)
                }
            }
        })
    }
})