Ajax中form表单以及模版引擎

九阈

于 2022-07-28 15:09:18 发布

阅读量125

点赞数

分类专栏： # Ajax 文章标签： ajax 前端

本文链接：https://blog.csdn.net/weixin_46048542/article/details/126010926

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是表单

表单在网页中主要负责数据采集功能。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>

阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的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>

快速获取表单中的数据
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>

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

请添加图片描述

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

请添加图片描述

模板引擎的实现原理

正则与字符串操作
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>

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

<!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函数
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 = '<div>我是{{name}}</div>'
    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>

请添加图片描述
字符串的多次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 = '<div>{{name}}今年{{ age }}岁了</div>'
    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>

使用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 = '<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)
  </script>
</body>

</html>

请添加图片描述
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 = '<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)
  </script>
</body>

</html>

请添加图片描述

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax中form表单以及模版引擎

表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。通过点击submit按钮，触发表单提交的操作，从而使页面跳转到actionURL的行为，叫做表单的同步提交。表单同步提交的缺点①表单同步提交后，整个页面会发生跳转，跳转到actionURL所指向的地址，用户体验很差。②表单同步提交后，页面之前的状态和数据会丢失。解决方案表单只负责采集数据，Ajax负责将数据提交到服务器。模板结构和数据模板引擎的好处。...
复制链接

扫一扫