ajax | roydon

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) { } // 请求成功之后的回调函数
})

获取表单数据:

jQuery 提供的 serialize() 函数，可以一次性获取表单中所有数据。使用 serialize()时，必须每个表单元素添加 name 属性。

例如：表单如下

<form id="form1">
    <input type="text" name="name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

serialize() 函数获取数据：

1
2
3

$('#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 }}

条件输出：

1 2	{{if condition}} 按需输出的内容 {{/if}} {{if condition1}} 按需输出的内容 {{else if condition2}} 按需输出的内容 {{/if}}

循环输出：

1
2
3

{{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()函数用于在字符串中用一些字符替换另一些字符

1	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)
  }
}