form表单与模板引擎

最新推荐文章于 2025-05-14 10:58:21 发布

原创最新推荐文章于 2025-05-14 10:58:21 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

一、目标

能够说出form表单的常用属性
能够知道如何阻止表单的默认提交行文
能够知道如何使用jQuery快速获取表单数据
能够知道如何安装和使用模板引擎
能够知道模板引擎的实现原理

二、目录

form表单的基本使用
通过Ajax提交表单数据
案例-评论列表
模板引擎的基本概念
art-template模板引擎
模板引擎的实现原理

1.form表单的基本使用

1.1什么是表单

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

1.2表单的组成部分

表单是由三部分组成的：

表单标签<form></form>
表单域（包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框）
表单按钮button

1.3form标签的属性

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

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

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

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

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

2.target

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

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

3.method

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

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

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

注意：

get:可以在地址栏中看到提交的数据，适合用来提交少量的、简单的数据。

post:在地址栏中看不到，提高数据的安全性适合用来提交大量的、复杂的、或包含文件上传的数据。

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

4.enctype

enctype属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype的值为appliction/x-www-form-urlencoded,表示在发送前编码所有的字符。

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为“+”加号，但不对特殊字符编码。（很少用）

注意：

在涉及到文件上传的操作时，必须将enctype的值设置为mulipart/form-data.

如果表单的提交不涉及到文件上传操作，则直接enctype的值设置为application/x-www-form-urlencoded即可！

1.4表单的同步提交及缺点

1.什么是表单的同步提交

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

2.表单同步提交的缺点

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

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

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

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

①页面会发生跳转

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

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

2.通过Ajax提交表单数据

2.1监听表单提交事件

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

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

2.2阻止表单默认提交行为

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

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

2.3快速获取表单中的数据

1.serialize()函数

为了简化表单中数据的获取操作，jquery提供了serialize（）函数，其语法格式如下：

$（表单）.serialize()

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

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

4.模板引擎的基本概念

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

4.2什么是模板引擎

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

4.3模板引擎的好处

减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护

5.art-template模板引擎

5.1art-template简介

art-template是一个简介、超快的模板引擎。中文官网首页为http://aui.github.io/art-template/zh-cn/index.html

5.2art-template的安装

在浏览器中访问http://aui.github.io/art-template/zh-cn/docs/installation.html页面,找到下载链接后，鼠标右键，选择“链接另存为”，将art-template下载到本地，然后，通过<script>标签加载到页面上进行使用。

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

1.使用传统方式渲染UI结构

问题：需要手动操作dom太繁琐了

<body>
    <div id="title"></div>
    <div>姓名：<span id="name"></span></div>
    <div>年龄：<span id="age"></span></div>
    <div>会员：<span id="isVIP"></span></div>
    <div>注册时间:<span id="regTime"></span></div>
    <div>
        爱好：
        <ul id="hobby">
            <li>爱好1</li>
            <li>爱好2</li>
        </ul>
    </div>
    <script>
        var data = {
            title: '<h3>用户信息</h3>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']
        }
        $(function() {
            $('#name').html(data.name)
            $('#title').html(data.title)
            $('#age').html(data.age)
            $('#isVIP').html(data.isVIP)
            $('#regTime').html(data.regTime)
            var rows = []
            $.each(data.hobby, function(i, item) {
                rows.push('<li>' + item + '</li>')
            })
            $('#hobby').html(rows.join(''))
        })

2.art-template的使用步骤

①导入art-template

②定义数据

③定义模板

④调用template函数

<body>
    <!-- 3.定义模板 -->
    <!-- 3.1模板的HTML结构，必须定义到script中 -->
    <script type="text/html" id="tpl-user">
        <h1>{{name}}</h1>
        <!--占位符-->
    </script>
    <script>
        //定义需要渲染的数据
        var data = {
                name: '张三'
            }
            //4.调用template函数
        var htmlStr = template("tpl-user", data)
            //5.渲染HTML结构
        $('#container').html(htmlStr)
    </script>
</body>

5.4art-template语法

1.什么是标准语法

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

2.标准输出-输出

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

3.标准语法-原文输出

{{@ value}} 解析html结构

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

4.标准语法-条件输出

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

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

<script type="text/html" id="tpl-user">
        <h1>{{name}}</h1>
        <!--占位符-->
        <div>
            {{if flag==0}} flag的值为0 {{else if flag==1}} flag的值为1 {{/if}}
        </div>
    </script>
    <script>
        //定义需要渲染的数据
        var data = {
                flag: 0
            }
            //4.调用template函数
        var htmlStr = template("tpl-user", data)
            //5.渲染HTML结构
        $('#container').html(htmlStr)
    </script>

5.标准语法-循环输出

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

6.标准语法-过滤器

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

语法：

{{value丨filterName}}

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

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

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

6.标准语法-过滤器

<div>注册事件：{{regTime|dataFormat}}</div>

6.模板引擎的实现原理

https://blog.youkuaiyun.com/MoYuP_ENG/article/details/127102560

6.1正则与字符串操作

1.基本语法

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

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

RegExpObject.exec(String)

示例代码：

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

2.分组

正则表达式中（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

<script>
        var str = '<div>我是{{name}}</div>'
        var pattern = /{{([a-zA-Z]+)}}/
        var result = pattern.exec(str)
        console.log(result)
    </script>

3.字符串的replace函数

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

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

  <script>
        var str = '<div>我是{{name}}</div>'
        var pattern = /{{([a-zA-Z]+)}}/
        var patternResult = pattern.exec(str)
        str = str.replace(patternResult[0], patternResult[1])
        console.log(str)
    </script>

4.多次replace

   <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])
        //第二次匹配
        var res2=pattern.exec(str)
        
       str= str.replace(res2[0],res2[1])
       //第三次匹配
       var res3=pattern.exec(str)
       console.log(res3)//null
    </script>

5.使用while循环replace

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