Ajax学习笔记

最新推荐文章于 2022-11-23 23:12:23 发布
最新推荐文章于 2022-11-23 23:12:23 发布
阅读量369 收藏 7
点赞数 9
文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46264622/article/details/119854956
版权

Ajax学习笔记

一、客户端与服务器

1、客户端与服务器的通信过程

在这里插入图片描述
在这里插入图片描述

2、网页中请求数据

在这里插入图片描述

3、资源请求方式

在这里插入图片描述

二、了解Ajax

1、什么是Ajax

在这里插入图片描述

2、为什么要学Ajax

在这里插入图片描述

3、Ajax的典型应用场景

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

三、jQuery中的Ajax

1、了解jQuery中的Ajax

在这里插入图片描述

2、$.get()函数的语法

在这里插入图片描述

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

在这里插入图片描述

  <button id="btnGET">发起不带参数的GET请求</button>

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

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

在这里插入图片描述

  <button id="btnGETINFO">发起单参数的GET请求</button>

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

3、$.post()函数的语法

在这里插入图片描述
在这里插入图片描述

  <button id="btnGETINFO">发起单参数的GET请求</button>

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

4、$.ajax()函数的语法

在这里插入图片描述

①、使用$.ajax()发起GET请求

在这里插入图片描述

    <button id="btnGET">发起GET请求</button>

    <script>
        $(function() {
            $('#btnGET').on('click', function() {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 1
                    },
                    success: function(res) {
                        console.log(res)
                    }
                })
            })
        })
    </script>

②、使用$.ajax()发起POST请求

在这里插入图片描述

 <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnPOST').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>

四、接口

1、接口的概念

在这里插入图片描述

2、接口的请求过程

在这里插入图片描述
在这里插入图片描述

3、接口测试工具

在这里插入图片描述

4、使用PostMan测试GET接口

在这里插入图片描述

5、使用PostMan测试POST接口

在这里插入图片描述

6、接口文档

①、什么是接口文档

在这里插入图片描述

②、接口文档的组成部分

在这里插入图片描述

③、接口文档示例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、案例:图书管理

1、渲染UI结果

在这里插入图片描述

2、案例中所用的库和插件

在这里插入图片描述

<!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" />
  <script src="./lib/jquery.js"></script>
</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"></tbody>
  </table>
</body>

</html>

3、渲染图书列表

在这里插入图片描述

4、删除图书

在这里插入图片描述

5、添加图书

在这里插入图片描述

  <script>
    $(function () {
      // 获取图书列表数据
      function getBookList() {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (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 href="javascript:;" class="del" data-id="' + item.id + '">删除</a></td></tr>')
          })
          $('#tb').empty().append(rows.join(''))
        })
      }

      getBookList()

      /* $('.del').on('click', function () {
        console.log('ok')
      }) */

      // 通过代理的方式为动态添加的元素绑定点击事件
      $('tbody').on('click', '.del', function () {
        var id = $(this).attr('data-id')
        $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
          if (res.status !== 200) return alert('删除图书失败！')
          getBookList()
        })
      })

      $('#btnAdd').on('click', function () {
        var bookname = $('#iptBookname').val().trim()
        var author = $('#iptAuthor').val().trim()
        var 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('')
        })
      })
    })
  </script>

六、简易聊天机器人

1、案例演示

在这里插入图片描述
在这里插入图片描述

2、代码结构

在这里插入图片描述

<!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;" id="talk_list">
                <li class="left_word">
                    <img src="img/person01.png" /> <span>嗨，最近想我没有？</span>
                </li>
                <!-- <li class="right_word">
            <img src="img/person02.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" placeholder="说的什么吧..." class="input_txt" id="ipt" />
            <input type="button" value="发 送" class="input_sub" id="btnSend" />
        </div>
    </div>
    <!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
    <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>

3、将用户输入的内容渲染到聊天窗口

在这里插入图片描述

4、发起请求获取聊天信息

在这里插入图片描述

5、将机器人的聊天内容转为语音

在这里插入图片描述

6、通过播放静音

在这里插入图片描述

7、使用回车发送信息

在这里插入图片描述

8、完整js代码

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

    // 为发送按钮绑定鼠标点击事件
    $('#btnSend').on('click', function() {
        var 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)
    })

    // 获取聊天机器人发送回来的消息
    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') {
                    // 接收聊天消息
                    var msg = res.data.info.text
                    $('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')
                        // 重置滚动条的位置
                    resetui()
                        // 调用 getVoice 函数，把文本转化为语音
                    getVoice(msg)
                }
            }
        })
    }

    // 把文字转化为语音进行播放
    function getVoice(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)
                }
            }
        })
    }

    // 为文本框绑定 keyup 事件
    $('#ipt').on('keyup', function(e) {
        // console.log(e.keyCode)
        if (e.keyCode === 13) {
            // console.log('用户弹起了回车键')
            $('#btnSend').click()
        }
    })
})
阿远ay
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax超详细学习笔记
康康要加油的博客
02-23 952
文章目录一、Ajax简介二、Ajax的使用1、XMLHttpRequest 对象2、Ajax的使用步骤2.1、创建XMLHttpRequest对象2.2、 给定请求方式以及请求地址2.3、 发送请求2.4、 获取服务器端给客户端的响应数据3、Ajax的运行原理三、 JSON详解1、JSON简介2、为什么要使用JSON3、JSON的语法规则4、JSON的6种数据类型5、Jackson的使用5.1、Jackson简介5.2、在响应中通过 JSON 格式传递5.3、通过 JSON 格式在响应中传递单个对象5.4、
图书管理系统（基于 Node.js 实现）
咖啡有点苦的博客
11-03 1884
图书管理系统（基于 Node.js 实现）
ajax学习笔记
z20210911的博客
08-08 661
有一定关系，但是这两个是两回事。json是存储和交互数据的格式，jsonp是后端解决跨域的方式，为什么说他两有关系呢是因为后端返回数据必须打成JOSN字符串。3：已经回来一部分数据了，小的数据会在此阶段一次性接收完毕，较大的数据有待进一步接收，响应头回来了。3.put delete这两个请求都属于复杂请求，这些请求在真正请求之前都需要嗅探请求（也 可以叫做预请求）//xhr内部有5种状态，值分别为：0、1、2、3、4（了解即可）app.use(cors())使用中间件，全局都能使用了，可以随便请求了。...
AJAX小结一
benlalagang的博客
08-02 171
AJAX小结、基础 get、post、ajax、聊天机器人的案例
AJAX基础学习
FM11101001的博客
11-09 710
Ajax学习，html服务器请求方式
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
Ajax介绍及调用api接口实现聊天机器人功能
qq_41858795的博客
11-23 1505
AJAX
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
《Ajax笔记》
02-27
就业班时，就业老师整理的关于 Ajax的面试笔记，里边含有javaScript基础加强， Ajax编程入门，jQuery框架等一些核心资料。 核心内容概述 1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架，九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星)
AJAX学习笔记
kart jim的CSDN博客
12-06 466
AJAX学习笔记
js案例:图书管理
m0_63400611的博客
12-25 562
插件 bootstrap.css jQuery.js VSCode插件:Bootstrap 3 Snippets 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>aaa</title> <script src="jQuery/jQuery.js"></script> <link rel="stylesheet" h
Ajax基础笔记（以理解为主）
weixin_62120659的博客
10-21 238
一、Ajax介绍1、它就是一个方法，不是语言2、它的功能：在页面不跳转的情况下，向后端获取数据，在页面上表现出来二、一些技术的介绍1.xml：网络中的传输的数据格式（和html类似）。2、css、js为基础不做介绍三、ajax的核心就是下面四个步骤完成的1）创建异步对象2）给异步对象绑定事件。3）初始化异步请求对象4）使用异步对象发送请求
Ajax — 聊天机器人演示
黑白两客
04-12 1262
<body> <div class="wrap"> <!-- 头部 Header 区域 --> <div class="header"> <h3>小思同学</h3> <img src="img/person01.png" alt="icon" /> </di...
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、付费专栏及课程。

余额充值