目录
1.Ajax
1.1什么是Ajax
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
1.2为什么要使用Ajax
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。通俗来讲Ajiax能让我们轻松实现网页与服务器之间的数据交互。
1.3Ajax的典型应用场景
用户名检测:注册用户时，通过ajax的形式，动态检测用户名是否被占用
搜索提示:当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表
数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过ajax的形式，来实现数据的交互
2.jQuery中的Ajax
2.1jQuery中发起Ajax请求最常用的三个方法
2.1.1$.get()
jQuery中 $.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。$.get)函数的语法如下:
$.get(url,[data], [callback])
其中，三个参数各自代表的含义如下:
| 参数名 | 参数类型 | 是否必选 | 说明 |
| url | string | 是 | 要请求的资源地址 |
| data | object | 否 | 请求资源期间要携带的参数 |
| callback | function | 否 | 请求成功时的回调函数 |
使用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可，示例代码如下:
<body>
<button id="btnget">请求</button>
<script>
$(function () {
$('#btnget').on('click', function () {
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
console.log(res); //这里的res是服务器返回的数据
})
})
})
</script>
</body>运行结果：
使用$.get()函数发起带参数的请求时，示例代码如下:
<body>
<button id="btnget">请求</button>
<script>
$(function () {
$('#btnget').on('click', function () {
$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function (res) {
console.log(res); //这里的res是服务器返回的数据
})
})
})
</script>
</body>运行结果：
2.1.2$.post()
jQuery 中 $.post()函数的功能单一，专门用来发起post请求，从而向服务器提交数据。$.post()函数的语法如下:
$t, [data], [callback ])
其中，三个参数各自代表的含义如下:
| 参数名 | 参数类型 | 是否必选 | 说明 |
| url | string | 是 | 提交数据的地址 |
| data | object | 否 | 要提交的数据 |
| callback | function | 否 | 数据提交成功时的回调函数 |
示例代码：
<body>
<button id="btnpost">提交</button>
<script>
$(function () {
$('#btnpost').on('click', function () {
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname: "斗罗大路", author: "王昭君", publisher: "上海图书出版社"},function (res) {
console.log(res); //这里的res是服务器返回的数据
})
})
})
</script>
</body>运行结果：
2.1.3$.ajax()
相比于$.get(和$.post()函数，jQuery 中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
$.ajax()函数的基本语法如下:
$.ajax ( {
type: ' ',//请求的方式，例如GET或POSTurl: ' ',//请求的URL地址
data: { },//这次请求要携带的数据
success: function (res) { }//请求成功之后的回调函数})
使用$.ajax)发起GET请求时，只需要将type属性的值设置为·GET·即可:
<body>
<button id="btnget">提交</button>
<script>
$(function () {
$('#btnget').on('click', function () {
$.ajax({
type:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
data:{
id:3
},
success:function(res){
console.log(res);
}
})
})
})
</script>
</body>
使用$.ajax)发起POST请求时，只需要将type属性的值设置为·POST·即可:
<body>
<button id="btnpost">提交</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>
</body>
3.接口
3.1接口的概念
使用Ajax请求数据时，被请求的URL地址，就叫做数据接口(简称接口)。同时，每个接口必须有请求方式。
3.2接口的请求过程
3.2.1通过GET方式请求接口的过程
3.2.2通过POST方式请求接口的过程
3.3接口测试工具
为了验证接口能否被正常被访问，我们常常需要使用接口测试工具,来对数据接口进行检测。
好处:接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。
3.4接口文档
3.4.1什么是接口文档
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
3.4.2接口文档的组成部分
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据:
1.接口名称:用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
2.接口URL:接口的调用地址。
3.调用方式:接口的调用方式，如GET或POST。
4.参数格式:接口需要传递的参数，每个参数必须包含参数名称.参数类型、是否必选、参数说明这4项内容。
5．响应格式:接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
6．返回示例(可选):通过对象的形式，例举服务器返回数据的结构。
案例：添加删除图书
<!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="../jquery/css/bootstrap.min.css">
<script src="../jquery/js/jquery.min.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="iptAuthorName" placeholder="请输入作者名">
</div>
<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="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>
<script>
$(function () {
//获取图书列表的数据
function getBooksList() {
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
console.log(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(''))
})
}
getBooksList();
$('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('删除图书失败!')
getBooksList();
})
})
$('#btnAdd').on('click', function () {
var bookname = $('#iptBookName').val().trim()
var author = $('#iptAuthorName').val().trim()
var publisher = $('#iptPublisher').val().trim()
if (bookname.length <= 0 || author.length <= 0 || publisher <= 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('添加图书失败')
getBooksList()
$('#iptBookName').val('')
$('#iptAuthorName').val('')
$('#iptPublisher').val('')
})
})
})
</script>
</body>
</html>
4.from表单与模板引擎
4.1什么是表单
表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器进行处理
4.2表单的组成部分
<form action="/login" id="f1">
<input type="text" name="user-name">
<input type="password" name="password">
<button type="submit" class="btn btn-default">提交</button>
</form>
表单由基本三部分组成：
表单标签： <form> </form>
表单域∶包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮： <button type="submit" class="btn btn-default">提交</button>
4.3form标签的属性
| 属性 | 值 | 描述 |
| action | URL地址 | 规定当提交表单时，向何处发送表单数据 |
| method | get或post | 规定以何种方式把表单数据提交到action URL |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 规定在发送表单数据之前如何对其进行编码 |
| target | blank self parent top framename | 规定在何处打开action URL |
4.3.1action属性
action属性用来规定当提交表单时，向何处发送表单数据。
action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。当<form>表单在未指定 action属性值的情况下，action 的默认值为当前页面的URL地址。
注意:当提交表单后，页面会立即跳转到action属性指定的URL地址
4.3.2target属性
target属性用来规定在何处打升action URL。
它的可选值有5个，默认情况下，target的值是_self，表示在相同的框架中打开action URL。
| blank | 在新窗口中打开。 |
| self | 默认。在相同的框架中打开。 |
| parent | 在父框架集中打开。(很少用) |
| top | 在整个窗口中打开。(很少用) |
| framename | 在指定的框架中打开。(很少用) |
4.3.3method 属性
method 属性用来规定以何种方式把表单数据提交到action URL。它的可选值有两个，分别是get和post。
默认情况下，method 的值为get，表示通过URL地址的形式，把表单数据提交到action URL.
注意:
get方式适合用来提交少量的、简单的数据。
post方式适合用来提交大量的、复杂的、或包含文件上传的数据。
4.3.4enctype属性
enctype属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。
| 描述 | 描述 |
| application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
| multipart/form-data | 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。 |
| text/plain | 空格转换为“+”加号，但不对特殊字符编码。(很少用) |
注意:
在涉及到文件上传的操作时，必须将enctype的值设置为multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将enctype的值设置为 application/x-www-form-urlencoded即可!
4.4表单的同步提交及缺点
4.4.1什么是表单的同步提交
通过点击submit 按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。
4.4.2表单同步提交的缺点
1.<form>表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
2.<form>表单同步提交后，页面之前的状态和数据会丢失。
解决方案:表单只负责采集数据，Ajax负责将数据提交到服务器。
4.5通过Ajax提交表单数据
4.5.1监听表单提交事件
在jQuery 中，可以使用如下两种方式，监听到表单的提交事件:
<body>
<form action="/login" id="f1">
<input type="text" name="user-name">
<input type="password" name="password">
<button type="submit" class="btn btn-default">提交</button>
</form>
<script>
$(function(){
//第一种方式
$('#f1').submit(function(){
alert('监听到了表单的提交事件')
})
//第二种方式
$("#f1").on('submit',function(){
alert('监听到了表单的提交事件2')
})
})
</script>
</body>4.5.2阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault( )函数，来阻止表单的提交和页面的跳转，示例代码如下:
<body>
<form action="/login" id="f1">
<input type="text" name="user-name">
<input type="password" name="password">
<button type="submit" class="btn btn-default">提交</button>
</form>
<script>
$(function () {
//第一种方式
$('#f1').submit(function (e) {
alert('监听到了表单的提交事件')
e.preventDefault()
})
//第二种方式
$("#f1").on('submit', function (e) {
alert('监听到了表单的提交事件2')
e.preventDefault()
})
})
</script>
</body>4.5.3快速获取表单中的数据
1.serialize()函数
为了简化表单中数据的获取操作，jQuery提供了serialize()函数，其语法格式如下:
$ (selector) .serialize ()
serialize()函数的好处:可以一次性获取到表单中的所有的数据。
注意:在使用serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性!
<body>
<form action="/login" id="f1">
<input type="text" name="user-name">
<input type="password" name="password">
<button type="submit" class="btn btn-default">提交</button>
</form>
<script>
$(function () {
//第一种方式
$('#f1').submit(function (e) {
e.preventDefault()
var data = $(this).serialize()
console.log(data);
})
//第二种方式
$("#f1").on('submit', function (e) {
e.preventDefault()
var data = $(this).serialize()
console.log(data);
})
})
</script>
</body>调用结果：user-name=用户名的值&password=密码的值
案例——基于bootstrap渲染评论列表
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>
<link rel="stylesheet" href="../jquery/css/bootstrap.min.css">
<script src="../jquery/js/jquery.min.js"></script>
<script src="../jquery/js/index.js"></script>
</head>
<body style="padding: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body" id="forAddCmt">
<div>评论人：</div>
<input type="text" class="form-control" name="username">
<div>评论内容：</div>
<textarea class="form-control" name="content"></textarea>
<button type="submit" class="btn btn-primary">发表评论</button>
</from>
</div>
<!-- 评论列表 -->
<ul class="list-group" id="cmt-list">
<li class="list-group-item">
<span class="badge" style="background-color: rgb(238,170,83);">评论时间</span>
<span class="badge" style="background-color: rgb(95,192,225);">评论人</span>
Item 1
</li>
</ul>
</body>
</html>js样式
function getCommentList(){
$.ajax({
type:'GET',
url:'http://www.liulongbin.top:3006/api/cmtlist',
data:{},
success:function(res){
console.log(res);
if (res.status != 200) return alert('获取评论列表失败')
var rows = []
$.each(res.data,function(i,item){
var str = '<li class="list-group-item"><span class="badge" style="background-color: rgb(95,192,225);">评论时间:'+item.time+'</span><span class="badge"style="background-color: rgb(238,170,83);">评论人:'+item.username+'</span>'+item.content+'</li>'
rows.push(str)
})
$('#cmt-list').empty().append(rows.join(''))
}
})
}
getCommentList();
$(function(){
$("#forAddCmt").submit(function(e){
e.preventDefault()
var data = $(this).serialize()
console.log(data);
$.post('http://www.liulongbin.top:3006/api/addcmt',data,function(res){
if(res.status !=201 ){
return alert('发表评论失败')
}
getCommentList()
$('#forAddCmt')[0].reset();
})
})
})4.6模板引擎
4.6.1什么是模板引擎？
模板引擎，顾名思义，它河以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
4.6.2模板引擎的好处
1.减少了字符串的拼接操作
2.使代码结构更清晰
3.使代码更易于阅读与维护
传统方式渲染
<body style="padding: 15px;">
<div id="title"></div>
<div>姓名: <span id="name"></span></div>
<div>年龄: <span id="age"></span></div>
<div>会员: <span id="vip"></span></div>
<div>注册时间: <span id="regTime"></span></div>
<div>爱好:
<ul id="hobby">
<li>爱好1</li>
<li>爱好2</li>
<li>爱好3</li>
</ul>
</div>
<script>
var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
vip: true,
regTime: new Date(),
hobby: ['吃饭','睡觉','打豆豆']
}
$(function () {
$("#title").html(data.title)
$('#age').html(data.age)
$('#vip').html(data.vip)
$('#regTime').html(data.regTime)
$('#name').html(data.name)
var rows = [];
$.each(data.hobby,function(i,item){
rows.push('<li>'+item+'</li>')
})
})
$('#hobby').html(rows.join(''))
</script>
</body>4.6.3art-template的基本使用
art-template的使用步骤
导入art-template
定义数据
定义模板
调用template函数渲染HITML结构
<!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="../jquery/css/bootstrap.min.css">
<script src="../jquery/js/jquery.min.js"></script>
<!-- 导入art-template -->
<script src="../jquery/js/template-web.js"></script>
</head>
<body style="padding: 15px;">
<div id="container"></div>
<!-- 定义模板 -->
<script type="text/html" id="tpl-user">
<h1>{{name}}-----{{age}}</h1>
</script>
<script>
/* 定义数据 */
var data = {
name: 'zs',
age: 20,
}
//调用template函数
var htmlStr = template('tpl-user', data);
console.log(htmlStr);
//渲染HITML结构
/* $("#container").html(htmlStr) */
var con = document.querySelector('#container');
con.innerHTML = htmlStr;
</script>
</body>
</html>4.6.4art-template的标准语法
标准语法——输出
{ {value } }
{ {obj.key} }
{ {obj [ ' key' ] } }
{ {a ? b : c} }
{ {a ll b}}
{ {a + b} }
在{f}语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。
标准语法——原文输出
{ {@ value} }
如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。
标准语法——条件输出
如果要实现条件输出，则可以在{}中使用if ... else if ... /if 的方式，进行按需输出。
{ {if value} }按需输出的内容{ { /if } }
{{ if v1}}按需输出的内容{{else if v2}}按需输出的内容 { {/if} }
标准语法——循环输出
如果要实现循环输出，则可以在{(}}内，通过each语法循环数组，当前循环的索引使用$index进行访问,当前的循环项使用Svalue 讲行访问
{ {each arr} }
{ {$index} } { {$value} }
{ { /each} }
标准语法—过滤器
{ {value | filterName } }
过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
定义过滤器的基本语法如下:
template.defaults.imports.filterName = function (value) { / *return处理的结果*/}
定义一个格式化时间的过滤器dateFormat 如下:
{{regTime | dateFormat}}
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d//注意，过滤器最后一定要return一个值
}4.6.5正则-正则的exec函数与提取分组
基本语法
RegExpobject.exec ( string)
exec()函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回null。
如果字符串中有匹配的值，则返回该匹配值
<script>
var str = 'hello';
var pattern = /o/;
console.log(pattern.exec(str));
</script>
如果字符串中没有匹配的值，则返回null。
<script>
var str = 'hello';
var pattern = /p/;
console.log(pattern.exec(str));
</script>
分组
正则表达式中()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下:
<script>
var str = '<div>我是{{name}}</div>';
var pattern = /{{([a-zA-Z]+)}}/;
var patternResult = pattern.exec(str);
console.log(patternResult);
</script>
4.6.6字符串的replace函数
replace()函数用于在字符串中用一些字符替换另一些字符，语法格式如下:
var result = '123456'.replace ('123'，'abc')//得到的 result的值为字符串 'abc456'
<script>
var str = '<div>我是{{name}}</div>';
var pattern = /{{([a-zA-Z]+)}}/;
var patternResult = pattern.exec(str);
console.log(patternResult);
str = str.replace(patternResult[0],patternResult[1])
console.log(str);
</script>
多次replace
<script>
var str = '<div>我是{{name}}今年{{age}}</div>';
var pattern = /{{s*([a-zA-Z]+)s*}}/;
//第一次匹配
var res1 = pattern.exec(str);
str = str.replace(res1[0],res1[1])
console.log(str);
//第二次匹配
var res2 = pattern.exec(str);
str = str.replace(res2[0],res2[1])
console.log(str);
//第三次匹配
var res3 = pattern.exec(str);
console.log(res3);
</script>
循环replace
script>
var str = '<div>我是{{name}}今年{{age}}</div>';
var pattern = /{{s*([a-zA-Z]+)s*}}/;
var patternResult = null;
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0],patternResult[1])
console.log(str);
}
</script>
4.6.7replace函数将匹配到的内容替换为真值
<script>
var data = {
name: '张三',
age: '88'
}
var str = '<div>我是{{name}}今年{{age}}岁了</div>';
var pattern = /{{s*([a-zA-Z]+)s*}}/;
var patternResult = null;
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str);
</script>
4.6.8实现简易的模板引擎
<!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>
<!-- 导入art-template -->
<script src="../jquery/js/template.js"></script>
</head>
<body>
<div id="user-box"></div>
<script type="text/html" id="tpl-user">
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{gendel}}</div>
<div>住址:{{address}}</div>
</script>
<script>
//定义数据
var data = {name:'zs',age:'18',gendel:'男',address:'北京市朝阳区'}
//调用模板引擎
var htmlStr = template('tpl-user',data)
//渲染数据
/*var con = document.querySelector('#user-box')
con.innerHTML = htmlStr*/
document.getElementById('user-box').innerHTML = htmlStr
</script>
</body>
</html>function template(id,data){
var str = document.getElementById(id).innerHTML;
var pattern = /{{s*([a-zA-Z]+)s*}}/
var pattResult = null;
while (pattResult = pattern.exec(str)) {
str = str.replace(pattResult[0],data[pattResult[1]])
}
console.log(str);
return str;
}
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
