进入ajax了,想要进入vue还有一个前提就是要把ajax给熟悉一下,看一看客户端与服务器之间是怎么一个通信的过程,第一天主要是先了解了一下ajax的一些介绍,ajax嘛,在进入之前,肯定是要了解一下客户端与服务器之间的一个通信过程,其实不管是请求还是发送都遵循的一个原则,即请求、处理、响应,如何来请求服务器上的数据,需要用到XMLHttpRequest对象,也就是声明一个对象实例var xhrObj = new XMLHttpRequest()。

我们通常所说的资源请求方式主要是分为两种,一种是get请求向服务器所求资源,一种是post向服务器发送资源。

继续看到什么事ajax?可以简单理解为用到了xhr,那他就是ajax,那么为什么要学习ajax?因为它可以轻松实现网页与服务器之间的数据交互,主要应用在如检测用户名是否被占用、加载搜索提示列表、根据页码刷新表格数据等。

我们这部分先以jQuery为例对ajax做一些操作,因为浏览器提供的xhr用法比较复杂,就先用jq来实现,jq里面主要是就是分为三种$.get() $.post() $.ajax() 这三种,其中前两种的用法是(url,【data】,【callback】),url使我们要请求的资源地址,data是我们的参数,callback是请求成功后的回调函数,他们两个可以带参请求也可以不带参请求,然后$.ajax()它是既可以实现get也可以实现post,

({type : ‘get or post’, url :‘’, data : {} , success :}) type就是请求方式,url请求地址,data参数,success是执行成功的回调

下面就是一些jq分别利用ajax的get以及post请求的用法

1.

不带参数的请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <button>
  10. 发起不带参数的请求
  11. </button>
  12. <body>
  13. <script src="./lib/jquery.js"></script>
  14. <script>
  15. $('button').on('click', () => $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))
  16. </script>
  17. </body>
  18. </html>

2.

带参数的请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <button>
  10. 发起带参数的请求
  11. </button>
  12. <body>
  13. <script src="./lib/jquery.js"></script>
  14. <script>
  15. $('button').click(() => {
  16. $.get('http://www.liulongbin.top:3006/api/getbooks',{id : 2},res => console.log(res))
  17. })
  18. </script>
  19. </body>
  20. </html>

3.

post请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <button>提交</button>
  11. <script src="./lib/jquery.js"></script>
  12. <script>
  13. $('button').on('click',function() {
  14. $.post('http://www.liulongbin.top:3006/api/addbook', {bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},res => console.log(res))
  15. })
  16. </script>
  17. </body>
  18. </html>

4.

ajax的get post请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <button>get</button>
  11. <script src="./lib/jquery.js"></script>
  12. <script>
  13. $('button').on('click', function() {
  14. $.ajax({
  15. type : 'get',
  16. url : 'http://www.liulongbin.top:3006/api/getbooks',
  17. data : {
  18. bookname : '红楼梦'
  19. },
  20. success : res => console.log(res)
  21. })
  22. })
  23.  
  24. </script>
  25. </body>
  26. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <button>post</button>
  11. <script src="./lib/jquery.js"></script>
  12. <script>
  13. $('button').on('click', function() {
  14. $.ajax({
  15. type : 'post',
  16. url : 'http://www.liulongbin.top:3006/api/addbook',
  17. data : {
  18. bookname : '红楼梦',
  19. author : '吴承恩',
  20. publisher: '出清图书出版社'
  21. },
  22. success : res => console.log(res)
  23. })
  24. })
  25.  
  26. </script>
  27. </body>
  28. </html>

5.

然后是今天的综合案例,首先是一个图书管理的页面利用ajax也就是后面会说到的接口达到添加删除图书的作用,然后结构使用bootstrap实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="./lib/bootstrap.css">
  9. <script src="./lib/jquery.js "></script>
  10. </head>
  11. <body style="padding: 15px;">
  12. <!-- 添加图书的面板 -->
  13. <!-- 1.primary表示蓝色的意思 先设置一个面板蓝色 -->
  14. <div class="panel panel-primary">
  15. <div class="panel-heading">
  16. <h3 class="panel-title">添加新图书</h3>
  17. </div>
  18. <!-- 2.1这里有个注意点 加了一个类名form-inline为form加可使里面的子元素为display inline block -->
  19. <div class="panel-body form-inline">
  20. <!-- 2.在面板body里面添加input表单 bs3-input-text这个 然后修改值-->
  21. <div class="input-group">
  22. <div class="input-group-addon">书名</div>
  23. <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
  24. </div>
  25. <div class="input-group">
  26. <div class="input-group-addon">作者</div>
  27. <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
  28. </div>
  29. <div class="input-group">
  30. <div class="input-group-addon">出版社</div>
  31. <input type="text" class="form-control" id="iptshiper" placeholder="请输入出版社">
  32. </div>
  33. <button id="btnAdd" class="btn btn-primary">添加</button>
  34. </div>
  35. </div>
  36. <!-- 图书的表格 -->
  37.  
  38. <table class="table table-bordered table-hover">
  39. <thead>
  40. <tr>
  41. <th>ID</th>
  42. <th>书名</th>
  43. <th>作者</th>
  44. <th>出版社</th>
  45. <th>操作</th>
  46. </tr>
  47. </thead>
  48. <tbody>
  49.  
  50. </tbody>
  51. </table>
  52. <script>
  53. // 1.获取图书列表
  54. function getData() {
  55. $.get('http://www.liulongbin.top:3006/api/getbooks',res => {
  56. if (res.status == 500) {
  57. return alert('获取数据失败')
  58. }else {
  59. // 1.1这里有个很厉害很厉害的点我搞了半天终于发现问题所在了,之前一直找不到 数据,就是这里循环的时候,他不是像原生js一样
  60. // 可以只写一个参数值,jq的好像是要把索引和参数都写上才行!!!
  61. let arr = []
  62. $.each(res.data, (i, item) => {
  63. arr.push(`<tr>
  64. <td>${item.id}</td>
  65. <td>${item.bookname}</td>
  66. <td>${item.author}</td>
  67. <td>${item.publisher}</td>
  68. <td><a href="javascript:;" data-id="${item.id}" >删除</a></td>
  69. </tr>`)
  70. })
  71. $('tbody').empty().append(arr.join(''))
  72. }
  73. })
  74. }
  75. getData()
  76. // 1.2为每个删除按钮添加删除功能 首先还是要明确一个点,这里的a标签是后加的,所以才采用事件委托才行
  77. $('tbody').on('click', 'a', function () {
  78. var id = $(this).attr('data-id')
  79. $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
  80. if (res.status !== 200) return alert('删除图书失败!')
  81. getData()
  82. })
  83. })
  84. // 1.3 添加图书功能
  85. $('#btnAdd').on('click', function() {
  86. let bookname = $('#iptBookname').val()
  87. let author = $('#iptAuthor').val()
  88. let shiner = $('#iptshiper').val()
  89. if (!bookname || !author || !shiner) {
  90. alert(
  91. '请输入完整内容'
  92. )
  93. }else {
  94. $.post('http://www.liulongbin.top:3006/api/addbook', {
  95. bookname : bookname,
  96. author : author,
  97. publisher : shiner
  98. }, function(res) {
  99. if(res.status == 500) return alert('请输入完整内容')
  100. getData()
  101. })
  102. }
  103. })
  104. </script>
  105. </body>
  106. </html>

6.

第二个案例是一个聊天机器人的案例,这个案例还多有趣的,实现的功能有输入内容可出现到聊天的内容区域,对面自动回复机器人也可以对应的回答你,然后就是当聊天内容超过一页之后再发消息,会自动回弹到聊天框的底部,这个要用到一个scrol.js 调用一下里面的resetui()即可,总体步骤分为先将用户输入内容渲染到聊天框,然后获取到用户输入内容并且发送到服务器获取机器人的回复内容并渲染到聊天界面,再通过一个接口将回复的消息转为语音播放,最后通过输入框的键盘事件检测是否按下回车来点击发送按钮一次

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <link rel="stylesheet" href="css/reset.css" />
  8. <link rel="stylesheet" href="css/main.css" />
  9. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  10. <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  11. <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
  12. <title>聊天机器人</title>
  13. </head>
  14.  
  15. <body>
  16. <div class="wrap">
  17. <!-- 头部 Header 区域 -->
  18. <div class="header">
  19. <h3>小思同学</h3>
  20. <img src="img/person01.png" alt="icon" />
  21. </div>
  22. <!-- 中间 聊天内容区域 -->
  23. <div class="main">
  24. <ul class="talk_list" style="top: 0px;">
  25. <li class="left_word">
  26. <img src="img/person01.png" /> <span>你好</span>
  27. </li>
  28. </ul>
  29. <div class="drag_bar" style="display: none;">
  30. <div
  31. class="drager ui-draggable ui-draggable-handle"
  32. style="display: none; height: 412.628px;"
  33. ></div>
  34. </div>
  35. </div>
  36. <audio style="display: none;" autoplay id="voice"></audio>
  37. <!-- 底部 消息编辑区域 -->
  38. <div class="footer">
  39. <img src="img/person02.png" alt="icon" />
  40. <input type="text" placeholder="说的什么吧..." class="input_txt" />
  41. <input type="button" value="发 送" class="input_sub" />
  42. </div>
  43. </div>
  44. <script type="text/javascript" src="js/scroll.js"></script>
  45. <script src="./js/chat.js ">
  46.  
  47. </script>
  48. </body>
  49. </html>

实现原理

  1. $(function(){
  2. // 初始化右侧滚动条
  3. // 这个方法定义在scroll.js中
  4. // 该方法的作用是一发消息就定位到聊天框的最底部
  5. resetui()
  6. // 1.将用户输入内容渲染到聊天窗口
  7. var text = ''
  8. $('.input_sub').on('click',function() {
  9. var text = $('.input_txt').val()
  10. if(text == '') {
  11. return $('.input_txt').val('')
  12. } else {
  13. $('.talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>'+text+'</span></li>')
  14. resetui()
  15. $('.input_txt').val('')
  16. getMsg(text)
  17. }
  18. })
  19. // 2.发情请求获取聊天消息
  20. function getMsg(text) {
  21. $.ajax({
  22. type : 'get',
  23. url : 'http://www.liulongbin.top:3006/api/robot',
  24. data : {
  25. spoken : text
  26. },
  27. success : function(res) {
  28. if (res.message == 'success') {
  29. let msg = res.data.info.text
  30. $('.talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>'+msg+'</span></li>')
  31. resetui()
  32. getAudio(msg)
  33. }
  34. }
  35. })
  36. }
  37. // 3.将回复信息转为语音播放
  38. function getAudio(msg) {
  39. $.ajax({
  40. type : 'get',
  41. url : 'http://www.liulongbin.top:3006/api/synthesize',
  42. data : {
  43. text : msg
  44. },
  45. success : function(res) {
  46. if (res.status == 200) {
  47. $('#voice').attr('src', res.voiceUrl)
  48. }
  49. }
  50. })
  51. }
  52. // 4.使用回车发送消息
  53. $('.input_txt').on('keyup', function(e) {
  54. console.log(e.keyCode);
  55. if (e.keyCode == 13) {
  56. $('.input_sub').trigger('click')
  57. }
  58. })
  59. })
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发起不带参数的请求
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
    $('button').on('click', () =>  $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))        
    </script>
</body>
</html>

ajax - 初步介绍的更多相关文章

  1. Ajax初步理解

    最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...

  2. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  3. 三、Android学习第三天——Activity的布局初步介绍(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 三.Android学习第三天——Activity的布局初步介绍 今天总结下 ...

  4. mxgraph进阶(二)mxgraph的初步介绍与开发入门

    mxgraph的初步介绍与开发入门 前言 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次.为此,在大师兄徐凯 ...

  5. 新浪微博API使用初步介绍——解决回调地址的问题

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...

  6. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

  7. Django 小实例S1 简易学生选课管理系统 0 初步介绍与演示

    Django 小实例S1 简易学生选课管理系统 第0章--初步介绍与演示 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 初步介绍 先介绍下这个 ...

  8. 【STM32】使用SDIO进行SD卡读写,包含文件管理FatFs(五)-文件管理初步介绍

    其他链接 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 ...

  9. [置顶] Ajax 初步学习总结

    Ajax是什么 Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不是一 ...

  10. Ajax【介绍、入门、解决Ajax中文、跨域、缓存】

    什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...

随机推荐

  1. 4.10 + (double)(rand()%10)/100.0

    黑色星期四 坏消息: 没有奥赛课,所以大概率调不出来 CF1479D 好消息: 5k 回来了,调题有望 中午起床直接来的机房,有学科自习就说 氟硫氢 不知道 结果被叫回去了 而且今天班里没水了,趁着大 ...

  2. SpringBoot 利用Timer 在指定时间2小时后执行任务

    /** * @Description * @Author songwp * @Date 2022/8/5 12:51 * @Version 1.0.0 **/ @Component public cl ...

  3. 处理flex布局

    点击查看代码 <view class="recommend-view"> <view class="title-view"> 热门推荐 ...

  4. pageoffice6 实现提取数据区域为子文件(Word拆分)

    在实际的开发过程中,有时会遇到希望提取Word文档中部分内容保存为子文件的需求,PageOffice支持提取Word文档数据区域中的内容为一个Word文件流,在服务器端创建PageOffice的Wor ...

  5. 物联网平台在AIoT领域8大场景应用

    物联网平台技术在AIoT智慧物联领域的应用越来越深入,尤其是在智慧城市建设项目中,提供了强有力的技术底座工具支撑.ToG的项目需要"门当户对"的服务商具备完善的资质和靠谱的技术服务 ...

  6. 文件系统(四):FAT32文件系统实现原理

    FAT32是从FAT12.FAT16发展而来,目前主要应用在移动存储设备中,比如SD卡.TF卡.隐藏的FAT文件系统现在也有被大量使用在UEFI启动分区中. 为使文章简单易读,下面内容特意隐藏了很多实 ...

  7. Ceph配置与认证授权

    目录 Ceph配置与认证授权 1. 为什么现在不采用修改配置文件的方式了呢? 2. Ceph元变量 3. 使用命令行修改配置 3.1 全部修改(使用服务名) 3.2 部分修改(修改进程) 3.3 临时 ...

  8. Nginx 调试模块 echo-nginx-module

    引言 Nginx 作为一个高性能的 HTTP 和反向代理 Web 服务器.如今很多项目都会选择 Nginx 作为反向代理服务器,但是避免不了在使用的过程中,会遇到各种各样的问题.因此 echo-ngi ...

  9. 三元运算符 JAVA12

    Java 提供了一个特别的三元运算符(也叫三目运算符) 表示:条件运算符的符号表示为"? :",使用该运算符时需要有三个操作数,因此称其为三目运算符. 举例一 int x,y,z; ...

  10. SQL KEEP 窗口函数等价改写案例

    一哥们出条sql题给我玩,将下面sql改成不使用keep分析函数的写法. select deptno, ename, sal, hiredate, min(sal) keep(dense_rank f ...