ajax - 初步介绍
进入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.
不带参数的请求
<!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>
2.
带参数的请求
<!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').click(() => {
$.get('http://www.liulongbin.top:3006/api/getbooks',{id : 2},res => console.log(res))
})
</script>
</body>
</html>
3.
post请求
<!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>
<body>
<button>提交</button>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click',function() {
$.post('http://www.liulongbin.top:3006/api/addbook', {bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},res => console.log(res))
})
</script>
</body>
</html>
4.
ajax的get post请求
<!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>
<body>
<button>get</button>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click', function() {
$.ajax({
type : 'get',
url : 'http://www.liulongbin.top:3006/api/getbooks',
data : {
bookname : '红楼梦'
},
success : res => console.log(res)
})
}) </script>
</body>
</html>
<!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>
<body>
<button>post</button>
<script src="./lib/jquery.js"></script>
<script>
$('button').on('click', function() {
$.ajax({
type : 'post',
url : 'http://www.liulongbin.top:3006/api/addbook',
data : {
bookname : '红楼梦',
author : '吴承恩',
publisher: '出清图书出版社'
},
success : res => console.log(res)
})
}) </script>
</body>
</html>
5.
然后是今天的综合案例，首先是一个图书管理的页面利用ajax也就是后面会说到的接口达到添加删除图书的作用，然后结构使用bootstrap实现
<!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>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./lib/jquery.js "></script>
</head>
<body style="padding: 15px;">
<!-- 添加图书的面板 -->
<!-- 1.primary表示蓝色的意思 先设置一个面板蓝色 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<!-- 2.1这里有个注意点 加了一个类名form-inline为form加可使里面的子元素为display inline block -->
<div class="panel-body form-inline">
<!-- 2.在面板body里面添加input表单 bs3-input-text这个 然后修改值-->
<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="iptshiper" 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> </tbody>
</table>
<script>
// 1.获取图书列表
function getData() {
$.get('http://www.liulongbin.top:3006/api/getbooks',res => {
if (res.status == 500) {
return alert('获取数据失败')
}else {
// 1.1这里有个很厉害很厉害的点我搞了半天终于发现问题所在了，之前一直找不到 数据，就是这里循环的时候，他不是像原生js一样
// 可以只写一个参数值，jq的好像是要把索引和参数都写上才行！！！
let arr = []
$.each(res.data, (i, item) => {
arr.push(`<tr>
<td>${item.id}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td><a href="javascript:;" data-id="${item.id}" >删除</a></td>
</tr>`)
})
$('tbody').empty().append(arr.join(''))
}
})
}
getData()
// 1.2为每个删除按钮添加删除功能 首先还是要明确一个点，这里的a标签是后加的，所以才采用事件委托才行
$('tbody').on('click', 'a', 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('删除图书失败！')
getData()
})
})
// 1.3 添加图书功能
$('#btnAdd').on('click', function() {
let bookname = $('#iptBookname').val()
let author = $('#iptAuthor').val()
let shiner = $('#iptshiper').val()
if (!bookname || !author || !shiner) {
alert(
'请输入完整内容'
)
}else {
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname : bookname,
author : author,
publisher : shiner
}, function(res) {
if(res.status == 500) return alert('请输入完整内容')
getData()
})
}
})
</script>
</body>
</html>
6.
第二个案例是一个聊天机器人的案例，这个案例还多有趣的，实现的功能有输入内容可出现到聊天的内容区域，对面自动回复机器人也可以对应的回答你，然后就是当聊天内容超过一页之后再发消息，会自动回弹到聊天框的底部，这个要用到一个scrol.js 调用一下里面的resetui（）即可，总体步骤分为先将用户输入内容渲染到聊天框，然后获取到用户输入内容并且发送到服务器获取机器人的回复内容并渲染到聊天界面，再通过一个接口将回复的消息转为语音播放，最后通过输入框的键盘事件检测是否按下回车来点击发送按钮一次
<!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;">
<li class="left_word">
<img src="img/person01.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>
<audio style="display: none;" autoplay id="voice"></audio>
<!-- 底部 消息编辑区域 -->
<div class="footer">
<img src="img/person02.png" alt="icon" />
<input type="text" placeholder="说的什么吧..." class="input_txt" />
<input type="button" value="发 送" class="input_sub" />
</div>
</div>
<script type="text/javascript" src="js/scroll.js"></script>
<script src="./js/chat.js "> </script>
</body>
</html>
实现原理
$(function(){
// 初始化右侧滚动条
// 这个方法定义在scroll.js中
// 该方法的作用是一发消息就定位到聊天框的最底部
resetui()
// 1.将用户输入内容渲染到聊天窗口
var text = ''
$('.input_sub').on('click',function() {
var text = $('.input_txt').val()
if(text == '') {
return $('.input_txt').val('')
} else {
$('.talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>'+text+'</span></li>')
resetui()
$('.input_txt').val('')
getMsg(text)
}
})
// 2.发情请求获取聊天消息
function getMsg(text) {
$.ajax({
type : 'get',
url : 'http://www.liulongbin.top:3006/api/robot',
data : {
spoken : text
},
success : function(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()
getAudio(msg)
}
}
})
}
// 3.将回复信息转为语音播放
function getAudio(msg) {
$.ajax({
type : 'get',
url : 'http://www.liulongbin.top:3006/api/synthesize',
data : {
text : msg
},
success : function(res) {
if (res.status == 200) {
$('#voice').attr('src', res.voiceUrl)
}
}
})
}
// 4.使用回车发送消息
$('.input_txt').on('keyup', function(e) {
console.log(e.keyCode);
if (e.keyCode == 13) {
$('.input_sub').trigger('click')
}
})
})
ajax - 初步介绍的更多相关文章
- Ajax初步理解
最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...
- 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍
我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...
- 三、Android学习第三天——Activity的布局初步介绍（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 三.Android学习第三天——Activity的布局初步介绍 今天总结下 ...
- mxgraph进阶(二)mxgraph的初步介绍与开发入门
mxgraph的初步介绍与开发入门 前言 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次.为此,在大师兄徐凯 ...
- 新浪微博API使用初步介绍——解决回调地址的问题
# -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...
- Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...
- Django 小实例S1 简易学生选课管理系统 0 初步介绍与演示
Django 小实例S1 简易学生选课管理系统 第0章--初步介绍与演示 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 初步介绍 先介绍下这个 ...
- 【STM32】使用SDIO进行SD卡读写，包含文件管理FatFs（五）-文件管理初步介绍
其他链接 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 ...
- [置顶] Ajax 初步学习总结
Ajax是什么 Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml.也就是异步请求更新技术.Ajax是一种对现有技术的一种新的应用,不是一 ...
- Ajax【介绍、入门、解决Ajax中文、跨域、缓存】
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准 ...
随机推荐
- 【python爬虫案例】用python爬豆瓣音乐TOP250排行榜！
目录 一.爬虫对象-豆瓣音乐TOP250 二.python爬虫代码讲解 三.同步视频 四.获取完整源码 一.爬虫对象-豆瓣音乐TOP250 今天我们分享一期python爬虫案例讲解.爬取对象是,豆瓣音 ...
- pdo类
testmysql.php <?php require_once "./mypdo.php"; //do something... //查一行 $id = 3; //$sql ...
- WEB服务与NGINX（18）- nginx rewrite功能详解
目录 1. nginx的rewrite功能详解 1.1 rewrite功能概述 1.2 rewrite模块的常用指令 1.2.1 if指令 1.2.2 set指令 1.2.3 break指令 1.2. ...
- WEB服务与NGINX（15）-NGINX安装第三方模块
1.nginx安装第三方模块 nginx安装第三方模块需要进行编译安装,安装方法如下: ./configure --prefix=/你的安装目录 --add-module=/第三方模块目录 ... 注 ...
- 一种利用光电容积描记（PPG）信号和深度学习模型对高血压分类的新方法
具体的软硬件实现点击 http://mcu-ai.com/ MCU-AI技术网页_MCU-AI 据世界心脏联合会统计,截至 2022 年,全球有 13 亿人被诊断患有高血压,每年约有 1000 万人死 ...
- .NET ASPIRE 预览版 7 发布
.NET Aspire 预览版 7 并不是原计划的一部分,此预览版有很多重大 API 更改,部分原因是一旦产品发布,我们将致力于稳定的 API 表面.可以说,Aspire团队希望确保在最终发布之前完成 ...
- VisualStduio如何自定义代码片段
什么是代码片段 代码片段又叫CodeSnippet,可以用来快捷补全代码.其实我们经常使用这个功能. 比如for循环,输入for会弹出这个窗口 我们选择第二个for,再按两次Tab键,编辑器就会自动生 ...
- rabbit 的下载与安装
因为RabbitMQ是用erlang语言开发的,所以我们在安装RabbitMQ前必须要安装erlang支持. erlang的下载地址:https://www.erlang.org/downloads ...
- python之Faker库如果构造用户信息测试数据
代码链接1:https://blog.csdn.net/qq_38484679/article/details/115244711 补充代码链接0:https://blog.csdn.net/weix ...
- golang的 CGO 是什么
CGO是Go(Golang)语言中的一个工具,全称为 "C-Go" 或者 "C for Go". 它是Go标准库的一部分,允许Go代码与C语言代码进行交互. C ...