Form表单和模板引擎

Posted 2021-07-19 鲸渔要加油

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Form表单和模板引擎相关的知识，希望对你有一定的参考价值。

文章目录

Form表单和模板引擎
一、 Form表单
1. <`form`> 标签的属性
2. 表单的同步提交及缺点
3. 通过 Ajax 提交表单数据
二、模板引擎
1. `art-template` 模板引擎

Form表单和模板引擎

一、 Form表单

表单标签
表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
表单按钮：通过设置type属性为submit来触发form表单的提交

1. <`form`> 标签的属性

`action` 向哪发送表单数据

action 属性用来规定当提交表单时，向何处发送表单数据
action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当 <form>表单在未制定 action 属性值的清空下，action的默认值为当前页面的 URL 地址

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

`target` 在哪打开

target 属性用来规定在何处打开 action URL
它的可选值有5个，默认情况下，target 的值是_self，表示在相同的框架中打开 action URL
_blank 在新窗口中打开
_self 默认，在相同的框架中打开

`method` 什么方式提交

method 属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个，分别是 get 和 post
默认情况下，method的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL

注意：

get 方式适合用来提交少量的，简单的数据
post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

`enctype` 编码

enctype属性用来规定在 发送表单数据之前如何对数据进行编码
它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码的所有字符
multipart/form-data 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值
text/plain 空格转为 “+” 加号，但不对特殊字符编码（和少用）

2. 表单的同步提交及缺点

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

缺点

<form> 表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差
<form> 表单同步提交后，页面之前的状态和数据会丢失

解决

表单只复杂采集数据，Ajax负责将数据提交到服务器

3. 通过 Ajax 提交表单数据

监听表单提交事件

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

阻止表单默认提交行为

表单提交后必然会跳转到 action URL 地址，这是默认跳转行为

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

 $(function () {
   // 第一种方式
   $('#f1').submit(function (e) {
     e.preventDefault()
   })
 })

`serialize()` 函数快速获取表单数据

可以一次性获取表单的所有数据

$(selector).serialize()

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

二、模板引擎

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

1. `art-template` 模板引擎

安装

首页中文官网
安装浏览器访问
直接鼠标右键另存为
在这里插入图片描述

基本使用

导入 art-template
在window全局，就多了一个函数，叫做 template('模板id'，需要渲染的数据对象)
定义数据 var data = { name: 'zs', age: 20 }
定义模板
模板的 html 结构，必须定义到 script 标签中，注意：需要把 type 属性改成 text/html
调用 template 函数
函数的返回值就是拼接好的模板字符串
渲染HTML结构

<body>
   <div></div>
   
   <!-- 1. 导入模板引擎 -->
   <script src="./template-web.js"></script>

   <!-- 3. 定义模板 -->
   <script type="text/html" id="yjy-user">
      <h1>{{name}}---{{age}}</h1>
   </script>
  
   <script>
      // 2. 定义数据
      var data = {name: '远近渔',age: 18}

      // 4. 调用 template 函数
      var yjystr = template('yjy-user', data)

      // 5. 渲染 HTML 结构
      $('div').html(yjystr)
   </script>
</body>

标准语法

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

输出
在 {{}} 语法中，可以进行变量的输出，对象属性 的输出，三元表达式 输出，逻辑或 输出，加减乘除等表达式 输出
{{value}} {{obj.key}} {{a ? b : c}} {{a || b}}
原文输出
如果输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染
条件输出
如果要实现条件输出，则可以在 {{}} 中使用 if...else if.../if 的方式，进行按需输出
{{if who === 0}} who是0 {{else if who === 1}} who是1 {{/if}}
循环输出
如果要实现循环输出，则可以在 {{}} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问
{{each who}} <li> {{$index}}, {{$value}} </li> {{/each}}
过滤器
语法 {{value | filteName}} 就是把左边的参数传给右边的处理函数，然后返回新值
定义过滤器 template.defaults.imports.who = function(value) {return处理的结果}

<body>
   <div class="aaa"></div>

   <!-- 1. 导入模板引擎 -->
   <script src="./template-web.js"></script>

   <!-- 3. 定义模板 -->
   <script type="text/html" id="yjy-user">
      <h1>{{regTime | dateFormat}}</h1>
   </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 = {
         regTime: new Date()
      }

      // 4. 调用 template 函数
      var yjystr = template('yjy-user', data)

      // 5. 渲染 HTML 结构
      $('.aaa').html(yjystr)
   </script>
</body>