Ajax中form表单以及模版引擎

什么是表单

表单在网页中主要负责数据采集功能。HTML 中的标签,就是用于采集用户输入的信息,并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
请添加图片描述

< form>标签的属性

action
action属性用来规定当提交表单时，向何处发送表单数据。
action属性的值应该是后端提供的一个URL地址,这个URL地址专i负责接收表单提交过来的数据。当表单在未指定action属性值的情况下，action 的默认值为当前页面的URL地址。
注意:当提交表单后，页面会立即跳转到action属性指定的URL地址
target
target属性用来规定在何处打开action URL。
它的可选值有5个,默认情况下，target 的值是_ self, 表示在相同的框架中打开action URL。
请添加图片描述
method
method属性用来规定以何种方式把表单数据提交到action URL.
它的可选值有两个，分别是get和post.
默认情况下，method 的值为get,示通过URL地址的形式，把表单数据提交到action URL.
注意:
get方式适合用来提交少量的、简单的数据。
post方式适合用来提交大量的、复杂的、或包含文件上传的数据。
enctype
enctype属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个，默认情况下，enctype 的值为application/x www -form- urlencoded,表示在发送前编码所有的字符。
请添加图片描述

什么是表单的同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。
表单同步提交的缺点
① 表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
② 表单同步提交后，页面之前的状态和数据会丢失。
解决方案:表单只负责采集数据，Ajax 负责将数据提交到服务器。

通过Ajax提交表单数据

监听表单提交事件
在jQuery中,可以使用如下两种方式，监听到表单的提交事件:
请添加图片描述

<!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">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <form action="/login" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

  <script>
    $(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('监听到了表单的提交事件')
      // })

      // 第二种方式
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
      })
    })
  </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
34
35
36

阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的event.preventDefault()函数，来阻止表单的提交和页面的跳转，示例代码如下:
请添加图片描述

<!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">
  <title>Document</title>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <form action="/login" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

  <script>
    $(function () {
      // 第一种方式
      // $('#f1').submit(function (e) {
      //   alert('监听到了表单的提交事件')
      //   e.preventDefault()
      // })

      // 第二种方式
      $('#f1').on('submit', function (e) {  
        alert('监听到了表单的提交事件2')
        e.preventDefault()
      })
    })
  </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
34
35
36

快速获取表单中的数据
serialize(函数)
为了简化表单中数据的获取操作, jQuery提供了serialize( 函数,其语法格式如下:
请添加图片描述
serialize0函数的好处:可以一次性获取到表单中的所有的数据。

注意:在使用serialize0函数快速获取表单数据时，必须为每个表单元素添加name属性!

什么是模板引擎

模板引擎,顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
模板引擎的好处
①减少了字符串的拼接操作
②使代码结构更清晰
③使代码更易于阅读与维护
art-template简介
art-template是一个简约、超快的模板引擎。中文官网首页为http://aui.github.io/art-template/zh-cn/index.html
art-template的安装
在浏览器中访问
http://aui.github.io/art-template/zh-cn/docs/installation.html页面，找到下载链接后，鼠标右键,选择“链接另存为”，将art-template下载到本地,然后，通过

<!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">
  <title>Document</title>
  <script src="./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>性别：{{  gender}}</div>
    <div>住址：{{address  }}</div>
  </script>

  <script>
    // 定义数据
    var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }

    // 调用模板引擎
    var htmlStr = template('tpl-user', data)

    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr
  </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
34
35

模板引擎常用语法和过滤器的基本使用

请添加图片描述

<!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">
  <title>Document</title>
  <!-- 1. 导入模板引擎 -->
  <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
  <script src="./lib/template-web.js"></script>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <div id="container"></div>

  <!-- 3. 定义模板 -->
  <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
  <script type="text/html" id="tpl-user">
    <h1>{{name}}    ------    {{age}}</h1>
    {{@ test}}

    <div>
      {{if flag === 0}}
      flag的值是0
      {{else if flag === 1}}
      flag的值是1
      {{/if}}
    </div>

    <ul>
      {{each hobby}}
      <li>索引是:{{$index}}，循环项是:{{$value}}</li>
      {{/each}}
    </ul>

    <h3>{{regTime | dateFormat}}</h3>
  </script>

  <script>
    // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }


    // 2. 定义需要渲染的数据
    var data = { name: 'zs', age: 20, test: '测试原文输出
', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }

    // 4. 调用 template 函数
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5. 渲染HTML结构
    $('#container').html(htmlStr)
  </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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

请添加图片描述

模板引擎的实现原理

正则与字符串操作
1.基本语法
exec(函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回null.
请添加图片描述
示例代码如下:

<!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">
  <title>Document</title>
</head>

<body>
  <script>
    var str = 'hello'
    var pattern = /x/

    var result = pattern.exec(str)
    console.log(result)
  </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

请添加图片描述
分组
正则表达式中()包起来的内容表示一个分组, 可以通过分组来提取自己想要的内容，示例代码如下:

<!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">
  <title>Document</title>
</head>

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

    var result = pattern.exec(str)

    console.log(result)
  </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

请添加图片描述
字符串的replace函数
replace0函数用于在字符串中用一些字符替换另一些字符, 语法格式如下:

<!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">
  <title>Document</title>
</head>

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

    var patternResult = pattern.exec(str)
    // console.log(patternResult)
    str = str.replace(patternResult[0], patternResult[1])

    console.log(str)
  </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

请添加图片描述
字符串的多次replace操作

<!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">
  <title>Document</title>
</head>

<body>
  <script>
    var str = '{{name}}今年{{ age }}岁了
'
    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>
</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

使用while循环进行replace操作

<!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">
  <title>Document</title>
</head>

<body>
  <script>
    var str = '{{name}}今年{{ age }}岁了
'
    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>
</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

请添加图片描述
replace替换为真值

<!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">
  <title>Document</title>
</head>

<body>
  <script>
    var data = { name: '张三', age: 20 }

    var str = '{{name}}今年{{ age }}岁了
'
    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>
</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

请添加图片描述

相关阅读:
Coding:小写一个debugfs
网络安全（黑客）自学方向
 深入探讨Java Stream流：数据处理的新思维
 分享从零开始学习网络设备配置（华为ensp版本）------任务1.1 安装eNSP模拟器
 【Unity3D】初学加密技巧（反破解）
非关系型数据库---Redis安装与基本使用
 intelliJ IDEA2022控制台中文输出乱码的问题
 PoE压分如何解决，A-level复议or重考？
Redis实战篇（三）秒杀
 一个前端大佬的十年回顾 | 漫画前端的前世今生
原文地址：https://blog.csdn.net/weixin_46048542/article/details/126010926