Ajax day02

form表单与模板引擎

form表单的基本使用

  • 什么是表单

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

  • 表单的组成部分

    • 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

  • <form>标签的属性

    • form标签用来采集数据。该标签的属性则是用来规定如何把采集到的数据发送到服务器。

      属性 值 描述
      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

    • action

      • action 属性用来规定当提交表单时，向何处发送表单数据。

      • action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。

      • 当 <form> 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

      • 注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

    • target

      • target 属性用来规定在何处打开 action URL。

        它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。

        值 描述
        _blank 在新窗口中打开。
        _self 默认。在相同的框架中打开。
        _parent 在父框架集中打开。（很少用）
        _top 在整个窗口中打开。（很少用）
        framename 在指定的框架中打开。（很少用）

    • method

      • method 属性用来规定以何种方式把表单数据提交到 action URL。

      • 它的可选值有两个，分别是 get 和 post。

      • 默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。

      • 注意：

        • get 方式适合用来提交少量的、简单的数据。

        • post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。

        • 在实际开发中，<form> 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

      <!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>
      ​
        <form action="/login" target="_blank" method="post">
          <input type="text" name="email_or_mobile" />
          <input type="password" name="password" />
          <button type="submit">提交</button>
        </form>
      </body>
      </html>
       

    • enctype

      • 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 即可！

  • 单的同步提交及缺点

    • 什么是表单的同步提交

      • 通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

    • 表单同步提交的缺点

      • ①<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。

      • ②<form>表单同步提交后，页面之前的状态和数据会丢失。

      • 思考：如何解决上述两个问题？

    • 如何解决表单同步提交的缺点

      • 如果使用表单提交数据，则会导致以下两个问题：

        • ① 页面会发生跳转

        • ② 页面之前的状态和数据会丢失

      • 解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。

通过Ajax提交表单数据

  • 监听表单提交事件

    • 在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

      $('#form1').submit(function(e) {
         alert('监听到了表单的提交事件')
      })
      ​
      $('#form1').on('submit', function(e) {
         alert('监听到了表单的提交事件')
      })
       

  • 阻止表单默认提交行为

    • 当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

      $('#form1').submit(function(e) {
         // 阻止表单的提交和页面的跳转
         e.preventDefault()
      })
      ​
      $('#form1').on('submit', function(e) {
         // 阻止表单的提交和页面的跳转
         e.preventDefault()
      })
       

  • 快速获取表单中的数据

    • serialize()函数

      • 为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：

        • $(selector).serialize()

      • serialize() 函数的好处：可以一次性获取到表单中的所有的数据。

    • serialize()函数示例

      <form id="form1">
          <input type="text" name="username" />
          <input type="password" name="password" />
          <button type="submit">提交</button>
      </form>
      $('#form1').serialize()
      // 调用的结果：
      // username=用户名的值&password=密码的值
       

      • 注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

案例 - 评论列表

function getCommentList() {
  $.ajax({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/cmtlist',
    success: function (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="">评论时间：' + item.time + '</span><span class="badge" style="">评论人：' + item.username + '</span>' + item.content + '</li>'
        rows.push(str)
      })
      $('#cmt-list').empty().append(rows.join(''))
    }
  })
}
​
getCommentList()
​
$(function () {
  $('#formAddCmt').submit(function (e) {
    e.preventDefault()
    var data = $(this).serialize()
    $.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
      if (res.status !== 201) {
        return alert('发表评论失败！')
      }
      getCommentList()
      // 把jQuery对象转成原生Dom对象
      $('#formAddCmt')[0].reset()
    })
 
<!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>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
  <script src="./js/cmt.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="formAddCmt">
      <div>评论人：</div>
      <input type="text" class="form-control" name="username" autocomplete="off" />
      <div>评论内容：</div>
      <textarea class="form-control" name="content"></textarea>
​
      <button type="submit" class="btn btn-primary">发表评论</button>
    </form>
  </div>
​
​
  <!-- 评论列表 -->
  <ul class="list-group" id="cmt-list">
    <li class="list-group-item">
      <span class="badge" style="">评论时间：</span>
      <span class="badge" style="">评论人：</span>
      Item 1
    </li>
  </ul>
​
</body>
​
</html>
 

模板引擎的基本概念

  • 渲染UI结构时遇到的问题

    • 上述代码是通过字符串拼接的形式，来渲染UI结构。

    • 如果UI结构比较复杂，则拼接字符串的时候需要格外注意引号之前的嵌套。且一旦需求发生变化，修改起来也非常麻烦。

  • 什么是模板引擎

    • 模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

  • 模板引擎的好处

    • ①减少了字符串的拼接操作

    • ②使代码结构更清晰

    • ③使代码更易于阅读与维护

art-template模板引擎

  • art-template简介

  • art-template的安装

  • art-template模板引擎的基本使用

    • art-template的使用步骤

      • ①导入 art-template

      • ②定义数据

      • ③定义模板

      • ④调用 template 函数

      • ⑤渲染HTML结构

  • art-template标准语法

    • 什么是标准语法

      • art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作，这种 {{ }} 语法在 art-template 中被称为标准语法。

    • 标准语法 - 输出

      • {{value}}

        {{obj.key}}

        {{obj['key']}}

        {{a ? b : c}}

        {{a || b}}

        {{a + b}}

      • 在 {{ }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

    • 标准语法 – 原文输出

      • {{@ value }}

      • 如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

    • 标准语法 – 条件输出

      • 如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。

      • {{if value}} 按需输出的内容 {{/if}}

        {{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

    • 标准语法 – 循环输出

      • 如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。

      • {{each arr}}

        {{$index}} {{$value}}

        {{/each}}

    • 标准语法 – 过滤器

      • 过滤器的本质，就是一个 function 处理函数。

    • 标准语法 – 过滤器

      • {{value | filterName}}

        • 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

        • 定义过滤器的基本语法如下：

          • template.defaults.imports.filterName = function(value){/return处理的结果/}

      • ​
        注册时间：{{regTime | dateFormat}}
        ​

        • 定义一个格式化时间的过滤器 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 一个值

            }

    <!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: '<h3>测试原文输出</h3>', 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>
     

  • 案例 – 新闻列表

    • 实现步骤

      • ①获取新闻数据

      • ②定义 template 模板

      • ③编译模板

      • ④定义时间过滤器

      • ⑤定义补零函数

    $(function () {
      // 给时间补零的函数
      function padZero(n) {
        if (n < 10) {
          return '0' + n
        } else {
          return n
        }
      }
    ​
      // 定义格式化时间的过滤器
      template.defaults.imports.dateFormat = function (dtStr) {
        var dt = new Date(dtStr)
    ​
        var y = dt.getFullYear()
        var m = padZero(dt.getMonth() + 1)
        var d = padZero(dt.getDate())
    ​
        var hh = padZero(dt.getHours())
        var mm = padZero(dt.getMinutes())
        var ss = padZero(dt.getSeconds())
    ​
        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
      }
    ​
      // 获取新闻列表的函数
      function getNewsList() {
        $.get('http://www.liulongbin.top:3006/api/news', function (res) {
          if (res.status !== 200) {
            return alert('获取新闻列表数据失败！')
          }
          for (var i = 0; i < res.data.length; i++) {
            // 把每一项的 tags 属性，从字符串改造成字符串的数组
            res.data[i].tags = res.data[i].tags.split(',')
          }
          console.log(res)
          var htmlStr = template('tpl-news', res)
          $('#news-list').html(htmlStr)
        })
      }
    ​
      getNewsList()
    ​
    })
    <!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>
      <link rel="stylesheet" href="./assets/news.css" />
      <script src="./lib/jquery.js"></script>
      <script src="./lib/template-web.js"></script>
      <script src="./js/news.js"></script>
    </head>
    ​
    <body>
    ​
      <div id="news-list"></div>
    ​
      <!-- 定义模板 -->
      <script type="text/html" id="tpl-news">
          {{each data}}
          <div class="news-item">
            <img class="thumb" src="{{'http://www.liulongbin.top:3006' + $value.img}}" alt="" />
            <div class="right-box">
              <h1 class="title">{{$value.title}}</h1>
              <div class="tags">
                {{each $value.tags}}
                <span>{{$value}}</span>
                {{/each}}
              </div>
              <div class="footer">
                <div>
                  <span>{{$value.source}}</span>&nbsp;&nbsp;
                  <span>{{$value.time | dateFormat}}</span>
                </div>
                <span>评论数：{{$value.cmtcount}}</span>
              </div>
            </div>
          </div>
          {{/each}}
        </script>
    ​
    </body>
    ​
    </html>
     

模板引擎的实现原理

  • 正则与字符串操作

    • 基本语法

      • exec() 函数用于检索字符串中的正则表达式的匹配。

      • 如果字符串中有匹配的值，则返回该匹配值，否则返回 null。

      • RegExpObject.exec(string)

      • 示例代码如下：

      • var str = 'hello'

        var pattern = /o/

        // 输出的结果["o", index: 4, input: "hello", groups: undefined]

        console.log(pattern.exec(str))

      <!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 = /o/
      ​
          var result = pattern.exec(str)
          console.log(result)
        </script>
      </body>
      ​
      </html>
       

    • 分组

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

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

      <!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 = '<div>我是{{name}}</div>'
          var pattern = /{{([a-zA-Z]+)}}/
      ​
          var result = pattern.exec(str)
      ​
          console.log(result)
        </script>
      </body>
      ​
      </html>
       

    • 字符串的replace函数

      • replace() 函数用于在字符串中用一些字符替换另一些字符，语法格式如下：

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

      • 示例代码如下：

      • var str = '<div>我是{{name}}</div>'

        var pattern = /{{([a-zA-Z]+)}}/

        var patternResult = pattern.exec(str)

        str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串

        // 输出的内容是：<div>我是name</div>

        console.log(str)

    • 多次replace

      • var str = '<div>{{name}}今年{{ age }}岁了</div>'

        var pattern = /{{\s*([a-zA-Z]+)\s*}}/

        var patternResult = pattern.exec(str)

        str = str.replace(patternResult[0], patternResult[1])

        console.log(str) // 输出 <div>name今年{{ age }}岁了</div>

        patternResult = pattern.exec(str)

        str = str.replace(patternResult[0], patternResult[1])

        console.log(str) // 输出 <div>name今年age岁了</div>

        patternResult = pattern.exec(str)

        console.log(patternResult) // 输出 null

    • 使用while循环replace

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

    • replace替换为真值

      • 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) //<div>张三今年20岁了</div>

  • 实现简易的模板引擎

    • 实现步骤

      • ①定义模板结构

      • ②预调用模板引擎

      • ③封装 template 函数

      • ④导入并使用自定义的模板引擎

    • 定义模板结构

    • 预调用模板引擎

    • 封装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
    }
     
    <!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>
     

posted @   守漠待花开  阅读(35)  评论(0)  编辑  收藏  举报
相关博文：
· Ajax day03
· Ajax day01
· form表单与模板引擎
· form表单与模块引擎
· Form表单的基本使用
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae