【前端】Ajax-form表单与模板引擎

钥钥睡着了

于 2022-11-17 20:45:29 发布

阅读量704

点赞数

分类专栏：前端黑马学习笔记文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/qq_45764950/article/details/127897184

版权

前端黑马学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

5.1.5使用while循环replace

5.1.6replace替换为真值

5.2实现简易的模板引擎

5.2.1实现步骤

一、form表单的基本使用

1.1什么是表单

表单在网页中主要负责数据采集功能。

1.2表单的组成部分

表单由三个基本部分组成：表单标签、表单域、表单按钮。

1.3form标签属性

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

当未指定action属性值的情况下，action的默认值为当前页面的URL地址。
target属性中：_blank:在新窗口中打开，_self:默认，在相同的框架中打开，_parent：在父框架中打开，_top:在整个窗口中打开，framename:在指定的框架中打开。
method属性中：get适合用来提交少量的、简单的数据；post适合用来提交大量的、复杂的、或包含文件上传的数据。
在使用包含文件上传控件的表单时，enctype属性必须使用multipart/form-data值。

1.4表单的同步提交及缺点

1.4.1什么是表单的同步提交

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

1.4.2表单同步提交的缺点

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

2、表单同步提交后，页面之间的状态和数据会丢失。

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

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

二、通过Ajax提交表单数据

2.1监听表单提交事件

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

2.2阻止表单默认提交行为

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

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

2.3快速获取表单中的数据

2.3.1serialize()函数

$(selector).serialize()

好处：可以一次性获取表单中的所有的数据，但是必须为每个表单元素添加name属性！

三、模板引擎的基本概念

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

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

3.2什么是模板引擎

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

3.3模板引擎的好处

1、减少了字符串的拼接操作

2、使代码结构更清晰

3、使代码更易于阅读和维护

四、art-template模板引擎

4.1art-template简介

中文官网：art-template (aui.github.io)

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

步骤：

导入art-template
定义数据
定义模板
调用template函数
渲染HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.导入模板引擎 -->
    <!-- 在window全局，多一个函数，叫做template('模板的id'，需要渲染的数据) -->
    <script src="./template-web.js"></script>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div id="container">

    </div>


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

    <script>
        // 2.定义需要渲染的数据
        var data = { name: 'zs' }

        //4.带用template函数
        var htmlstr = template('tpl-user', data)
        $('#container').html(htmlstr)
    </script>
</body>

</html>

4.3art-template标准语法

4.3.1标准语法-原文输出

    {{@ value}}

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

4.3.2标准语法-条件输出

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

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

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


            {{if flag===0}}
            flag的值为0
            {{else if flag===1}}
            flag的值为1
            {{/if}}

4.3.3标准语法-循环输出

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

        {{each arr}}
            {{$index}}{{$value}}
        {{/each}}



            {{each hobby}}
                <li>索引是：{{$index}},循环项是：{{$value}}</li>
            {{/each}}

4.3.4标准语法-过滤器

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

       {{value | filterName}}

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

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

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

示例：

    <script type="text/html" id="tpl-user">
        <h3>{{regTime|dataFormat}}</h3>
    </script>

    <script>
        template.defaults.imports.dataFormat = function (date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d
            // return处理的结果
        }
        var data = {regTime: new Date() }
    </script>

五、模板引擎的实现原理

5.1正则与字符串操作

5.1.1基本语法

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

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

    RegEzpObject.exec(string)

示例：

    <script>
        var str = 'hello'
        var pattern = /o/
        var result = pattern.exec(str)
        console.log(result);
    </script>

5.1.2分组

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

示例：

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

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

5.1.3字符串的replace函数

replace()函数用于在字符串中用一些字符替换另一些字符。

        var result='123456'.replace('123','abc')//得到'abc456'

示例：

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

        var patternResult = pattern.exec(str)
        str = str.replace(patternResult[0], patternResult[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容
        console.log(str);

5.1.4多次replace

        var str = '<div>我是{{name}}今年{{ age }}岁了</div>'
        var pattern = /{{\s*([a-zA-A]+)\s*}}/

        //第一次匹配
        var res1 = pattern.exec(str)
        str = str.replace(res1[0], res1[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容
        console.log(str);    //<div>我是name今年{{ age }}岁了</div>
        //第二次匹配
        var res2 = pattern.exec(str)
        str = str.replace(res2[0], res2[1]) //数组0是正则选出的内容，数组1是不含符号的文本内容
        console.log(str);    //<div>我是name今年age岁了</div>

5.1.5使用while循环replace

        var str = '<div>我是{{name}}今年{{ age }}岁了</div>'
        var pattern = /{{\s*([a-zA-A]+)\s*}}/

        var patternResult = null
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], patternResult[1])
        }
        console.log(str);

5.1.6replace替换为真值

        var data = { name: '张三', age: 20 }
        var str = '<div>我是{{name}}今年{{ age }}岁了</div>'
        var pattern = /{{\s*([a-zA-A]+)\s*}}/

        var patternResult = null
        while (patternResult = pattern.exec(str)) {
            str = str.replace(patternResult[0], data[patternResult[1]])
        }
        console.log(str);

5.2实现简易的模板引擎

5.2.1实现步骤

1、定义模板结构

2、预调用模板引擎

3、封装template函数

4、导入并使用自定义的模板引擎

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入自定义的模板引擎 -->
    <!-- <script src="./template.js"></script> -->
</head>

<body>

    <div id="user-box"></div>

    <!-- 1.定义模板结构 -->
    <script type="text/html" id="tpl-user">
        <div>姓名：{{name}}</div>
        <div>年龄：{{ age }}</div>
        <div>性别：{{  gender}}</div>
        <div>住址：{{address  }}</div>
    </script>

    <script>
        // 2.预调用
        var data = { name: '张三', age: 18, gender: '男', address: '中国山东' }
        var htmlStr = template('tpl-user', data)
        document.getElementById('user-box').innerHTML = htmlStr


        //3.封装
        function template(id, data) {
            var str = document.getElementById(id).innerHTML
            var pattern = /{{\s*([a-zA-A]+)\s*}}/

            var patternResult = null
            while (patternResult = pattern.exec(str)) {
                str = str.replace(patternResult[0], data[patternResult[1]])
            }
            return str
        }
    </script>
</body>

</html>

钥钥睡着了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端】Ajax-form表单与模板引擎

表单在网页中主要负责数据采集功能。通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。
复制链接

扫一扫