• jQuery之Ajax

    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	请求成功时的回调函数

    • 1
    • 2
    • 3
    • 4

    2、$.post()

    功能单一，发起 post 请求，向服务器提交数据。

    $.post(url, [data], [callback]);
//参数一：url	string类型	提交数据的地址
//参数二：data	object类型	要提交的数据
//参数三：callback	数据提交成功时的回调函数

    • 1
    • 2
    • 3
    • 4

    3、$.ajax()

    功能更多

    $.ajax({
   type: '', // 请求的方式 GET 或 POST
   url: '',  // 请求的URL
   data: { },// 请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    获取表单数据:

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

    例如：表单如下

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

    • 1
    • 2
    • 3
    • 4
    • 5

    serialize() 函数获取数据：

    $('#form1').serialize()
// 数据：
// name=值&password=值

    • 1
    • 2
    • 3

    模板引擎

    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>
  
  <script src="./lib/template-web.js">script>
  <script src="./lib/jquery.js">script>
head>

<body>

  <div id="container">div>

  
  <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    art-template标准语法：

    {{value}}
{{obj.key}}//对象属性的输出
{{obj['key']}}//对象属性的输出
{{a ? b : c}}//三元表达式
{{a || b}}//逻辑
{{a + b}}//运算
//若数据值包含HTML结构需要完整输出且被渲染，则：
{{@ value }}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    条件输出：

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

    • 1
    • 2
    JQuery中Ajax的异步调用 示例
    application/x-rar 4星 超过75%的资源 142KB
    下载

    循环输出：

    {{each arr}}
    {{$index}} {{$value}}
{{/each}}

    • 1
    • 2
    • 3

    例如输出数组：{ arr: [‘1’, ‘2’, ‘3’] }

    <ul>
  {{each arr}}
  <li>索引:{{$index}}值:{{$value}}li>
  {{/each}}
ul>

    • 1
    • 2
    • 3
    • 4
    • 5

    过滤器：

    {{value | filterName}}
//定义过滤器，过滤器名称filterName
template.defaults.imports.filterName = function(value){
    /*return处理的结果*/
    /*必须有return*/
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    正则与字符串操作：
    exec() 函数用于检索字符串中的正则表达式的匹配。
    如果字符串中有匹配的值，则返回该匹配值，否则返回 null。

    var str = 'hello'
var pattern = /o/                         
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str)) 

    • 1
    • 2
    • 3
    • 4

    正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：

     var str = '<div>我是{{name}}</div>'
 var pattern = /{{([a-zA-Z]+)}}/

 var patternResult = pattern.exec(str)
 console.log(patternResult)
 // 得到 name 相关的分组信息
 // ["{{name}}", "name", index: 7, input: "
    我是{{name}}
    ", groups: undefined]    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    replace()函数用于在字符串中用一些字符替换另一些字符

    var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

    • 1

    用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) // 输出 
    name今年age岁了
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    jqueryjqueryjquery
    application/x-zip 0星 超过10%的资源 1.73MB
    下载

    替换为数据中的值：

    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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    自定义模板引擎，封装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
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    使用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)
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    JSON和JS对象的互转:

    1. JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
    var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}

    • 1
    • 2
    1. JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
    var json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

    • 1
    • 2
  • 相关阅读:
    BOM介绍以及应用以及this指向问题
    卷积神经网络图片放大,神经网络输入图片大小
    读书笔记《Spring Boot+Vue全栈开发实战》(下)
    Linux安装kafka-manager
    排序算法 —— 希尔排序（图文超详细）
    C //例4.6 要求按照考试成绩的等级输出百分制分数段，A等为85分以上，B等为70~84分，C等为60~69分，D等为60分以下。成绩的等级由键盘输入。
    【ROS入门】使用 ROS 话题(Topic)机制实现消息发布与订阅及launch文件的封装
    MacOs下安装Kong网关
    搭建Atlas2.2.0 集成CDH6.3.2 生产环境+kerberos
    [机器视觉]halcon应用实例 边缘检测2
  • 原文地址：https://blog.csdn.net/m0_51390535/article/details/126222537