PostMan下载地址：https://www.postman.com/downloads/
或中文版工具apifox：https://www.apifox.cn/
中文版工具apifox帮助地址：帮助中心 | Apifox 使用文档
基础
全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
1、$.get()
功能单一，发起 get 请求，从服务器拿数据。
$.get(url, [data], [callback])
//参数一：url string类型 要请求的资源地址
//参数二：data object类型 请求资源期间要携带的参数
//参数三：callback 请求成功时的回调函数
2、$.post()
功能单一，发起 post 请求，向服务器提交数据。
$.post(url, [data], [callback]);
//参数一：url string类型 提交数据的地址
//参数二：data object类型 要提交的数据
//参数三：callback 数据提交成功时的回调函数
3、$.ajax()
功能更多
$.ajax({
type: '', // 请求的方式 GET 或 POST
url: '', // 请求的URL
data: { },// 请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
})
3.1、携带 token 请求头的 get 请求
$.ajax({
type: 'GET',
url: ' ',
data: {},
// dataType: 'JSON',
// async: false, //请求是否异步，默认为异步
headers: {
// 'Authorization': localStorage.getItem('token')
'token': localStorage.getItem('token')
},
success: function (res) {
console.log(res);
},
error: function (e) {
console.log(e);
}
})
3.2、携带 token 请求头的 post 请求
$.ajax({
type: 'POST',
url: '',
data: {},
dataType: "json",
contentType: "application/json",// json数据
// contentType: "application/x-www-form-urlencoded",// 表单(文件)类型
headers: {
// Accept: "application/json; charset=utf-8",
token: localStorage.getItem('token')
},
success: function (res) {
console.log(res);
},
error: function (e) {
console.log(e);
}
})
获取表单数据:
jQuery 提供的 serialize() 函数，可以一次性获取表单中所有数据。使用 serialize()时，必须每个表单元素添加 name 属性。
例如：表单如下
<form id="form1">
<input type="text" name="name" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
serialize() 函数获取数据：
$('#form1').serialize()
// 数据：
// name=值&password=值
模板引擎
art-template模板引擎：
网址： http://aui.github.io/art-template/zh-cn/index.html
下载js文件：http://aui.github.io/art-template/zh-cn/docs/installation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<!-- 1. 导入模板引擎template-web.js文件 -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 2. 定义模板，在script中定义的HTML需要指定html解析type="text/html" -->
<script type="text/html" id="example">
<!-- {{}}表示占位符，是要传入的数据 -->
<h1>{{name}}</h1>
</script>
<script>
// 3. 取出数据
var data = { name: 'roydon' }
// 4. 调用模板引擎提供的 template 函数（第一个参数表示模板的id，第二个参数是数据）
var temp = template('example', data)
// 5. 渲染HTML
$('#container').html(temp)
</script>
</body>
</html>
art-template标准语法：
{{value}}
{{obj.key}}//对象属性的输出
{{obj['key']}}//对象属性的输出
{{a ? b : c}}//三元表达式
{{a || b}}//逻辑
{{a + b}}//运算
//若数据值包含HTML结构需要完整输出且被渲染，则：
{{@ value }}
条件输出：
{{if condition}} 按需输出的内容 {{/if}}
{{if condition1}} 按需输出的内容 {{else if condition2}} 按需输出的内容 {{/if}}
循环输出：
{{each arr}}
{{$index}} {{$value}}
{{/each}}
例如输出数组：{ arr: [‘1’, ‘2’, ‘3’] }
<ul>
{{each arr}}
<li>索引:{{$index}}值:{{$value}}</li>
{{/each}}
</ul>
过滤器：
{{value | filterName}}
//定义过滤器，过滤器名称filterName
template.defaults.imports.filterName = function(value){
/*return处理的结果*/
/*必须有return*/
}
正则与字符串操作：
exec() 函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回 null。
var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：
var str = '<div>我是{{name}}</div>'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 相关的分组信息
// ["{{name}}", "name", index: 7, input: "<div>我是{{name}}</div>", groups: undefined]
replace()函数用于在字符串中用一些字符替换另一些字符
var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'
用while循环替换：
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) // 输出 <div>name今年age岁了</div>
替换为数据中的值：
var data = { name: '张三', age: 20 }
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)
自定义模板引擎，封装template函数：
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]])
}
return str
}
XMLHttpRequest
XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，可以请求服务器上的数据资源。jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
使用xhr发起GET请求：
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
//监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取服务器响应的数据xhr.responseText(json格式的字符串)
console.log(xhr.responseText)
}
}
使用xhr发起POST请求：
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数,同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5. 监听事件 onreadystatechange
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}
JSON和JS对象的互转:
- JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}
- JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'
扫一扫
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
