Ajax2day(serialize()函数一次获取form全部数据，art-template模板引擎下载及使用方法步骤。正则表达式实现模板引擎)

荻风溪畔

已于 2022-07-21 09:14:41 修改

阅读量281

点赞数

分类专栏： javascript web笔记笔记文章标签：正则表达式前端 html

于 2022-07-20 17:19:14 首次发布

本文链接：https://blog.csdn.net/qq_44976531/article/details/125886078

版权

笔记同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

web笔记

37 篇文章 0 订阅

订阅专栏

javascript

19 篇文章 0 订阅

订阅专栏

form表单

form表单的组成部分

在这里插入图片描述
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

form标签的属性

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

在这里插入图片描述

action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。当 <form> 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
注意：
当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。
注意：
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。
默认情况下，target 的值是 _self，表示在自身窗口中打开 action URL
4. enctype 属性用来规定在 发送表单数据之前如何对数据进行编码。
默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。
注意：
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data

什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
缺点：
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
<form>表单同步提交后，页面之前的状态和数据会丢失。
解决方案：
表单只负责采集数据，Ajax 负责将数据提交到服务器。
步骤如下：

        $(function () {
        //1.监听表单按钮的提交事件
            $('#formAddCmt').submit(function (e) { 
            //2.阻止表单的提交和页面的跳转 
                e.preventDefault()
                //3.利用serialize()函数获取表单中的所有数据(还有serializeArray函数)
                let data = $(this).serialize()
                 // 4.利用ajax上传表单数据
                $.ajax(
                    {
                        method: 'POST',
                        url: 'http://www.liulongbin.top:3006/api/addcmt',
                        data: data,
                        success: function (res) {
                            if (res.status === 201) {
                                console.log("发表评论成功")
                            }
                            else {
                                console.log(res.status)
                            }
                        }
                    }
                )
                getCmtList()
                // $("#formAddCmt")[0].reset()
                document.querySelector('#formAddCmt').reset()
                console.log($("#formAddCmt")[0] === document.querySelector('#formAddCmt'))   //true
            })
        })

评论案例

在这里插入图片描述
脚本代码：

    <script>
        // 获取评论数据
        function getCmtList() {
            $.ajax({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/cmtlist',
                data: "",
                success: function (res) {   //这里注意ajax的回调函数设置return
                    if (res.status !== 200) {
                        return alert(`${res.status}获取评论列表失败`)
                    }
                    else {
                        // console.log(res.data)
                        rend(res.data) //渲染
                    }
                },
            })
        }
        // 渲染
        function rend(content) {
            $('.list-group').empty()   //先清空评论
            $.each(content, function (content) { // 遍历评论数据
                $('.list-group').append(
                    `<li class= "list-group-item" ><span class="badge" style="background-color: #F0AD4E;">评论时间：${this.time}</span><span class="badge" style="background-color: #5BC0DE;">评论人：${this.username}</span>${this.content}</li>`)
            })
        }
        getCmtList()
        //发表评论
        $(function () {
            //1.监听表单按钮的提交事件
            $('#formAddCmt').submit(function (e) {
                //2.阻止表单的提交和页面的跳转
                e.preventDefault()
                //3.利用serialize()函数获取表单中的所有数据(还有serializeArray函数)
                let data = $(this).serialize()
                // 4.利用ajax上传表单数据
                $.ajax(
                    {
                        method: 'POST',
                        url: 'http://www.liulongbin.top:3006/api/addcmt',
                        data: data,
                        success: function (res) {
                            if (res.status === 201) {
                                console.log("发表评论成功")
                            }
                            else {
                                console.log(res.status)
                            }
                        }
                    }
                )
                getCmtList()
                // $("#formAddCmt")[0].reset()
                document.querySelector('#formAddCmt').reset() //重置表单
                console.log($("#formAddCmt")[0] === document.querySelector('#formAddCmt'))
            })
        })
    </script>

模板引擎

在这里插入图片描述

art-template简介

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

art-template的使用步骤

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

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

标准语法

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

标准语法 – 输出

在这里插入图片描述

标准语法 – 原文输出

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

{{@ value }}

示例：

test: '<h3>测试原文输出</h3>',
{{@ test}}

标准语法 – 条件输出

{{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处理的结果*/}

使用示例：

在这里插入图片描述

<!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="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <div id="container">
    </div>
    <!-- 1.定义HTML结构模板 -->
    <script type="text/html" id="tpl-user">
        <!-- 3.定义模板 -->
    <h1>{{name}}-----{{age}}
        {{@test}}
    </h1>

    <div>
        {{if flag===1}} 1 {{else}} {{flag}} {{/if}}
    </div>

    <ul>
        {{each hobby}}
        <li>索引是：{{$index}},值是:{{$value}}</li>
        {{/each}}
    </ul>

    <div>
        {{regTime|dateFormat}}
    </div>

    </script>
    <script>
        // 2.定义需要渲染的数据
        let data = {
            name: '张三',
            age: 20,
            test: '<h3>我是原文输出</h3>',
            flag: 66,
            hobby: ['睡觉', '吃饭', '摆烂'],
            regTime: new Date(),
        }
        // 定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {   //这里的date是传入regTime
            let y = date.getFullYear()
            let m = date.getMonth() + 1
            let d = date.getDate()
            return y + '-' + m + '-' + d
        }
        // 4.调用template函数
        let htmlStr = template('tpl-user', data)
        console.log(htmlStr)
        // 5.渲染html结构
        $('#container').html(htmlStr)
    </script>
</body>
</html>

新闻案例：

（不打码显示图片违规）
在这里插入图片描述

html部分代码：

<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">
        <!-- tags用split转成数组，然后循环输出 -->
        {{each $value.tags.split(',')}}  
        <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>

news.js代码：

// 入口函数
$(function () {
    // 时间补0函数
    function addZero(time){
        return   time>=10?time:'0'+time
    }
    // 获取新闻列表的函数
    function getNewsList(){
        $.get('http://www.liulongbin.top:3006/api/news',function(res){
            if(res.status!==200){
                return alert('获取新闻列表数据失败')
            }
            // 渲染模板
            // 定义处理时间的过滤器,dtStr形参,应该由{{$value.time|dateFormat}}中的value.time传入
            template.defaults.imports.dateFormat = function (dtStr) {   
            let dt=new Date(dtStr)
            let y = dt.getFullYear()
            let m = addZero(dt.getMonth() + 1)
            let d = addZero(dt.getDate())
            let hh = addZero(dt.getHours())
            let mm = addZero(dt.getMinutes())
            let ss = addZero(dt.getSeconds())
            return y + '-' + m + '-' + d+ '-' +hh+':' +mm+':' +ss
            }
            let htmlStr=template('tpl-news',res)
            $('#news-list').html(htmlStr)
            console.log(res)
        })
    }
    getNewsList()

})

正则表达式实现简单的模板引擎

myTemplate.js

function template(id, data) {
  let str = document.getElementById(id).innerHTML
  let pattern = /{{\s*([a-zA-Z]+)\s*}}/

  let pattResult = null
  while (pattResult = pattern.exec(str)) {   //注意是赋值操作
    str = str.replace(pattResult[0], data[pattResult[1]])
  }
  return str
}

便于理解正则的小例子：

        let str = '<div>我是{{name}}</div>'
        let pattern = /{{([a-zA-Z]+)}}/        //加了()进行分组
        let result = pattern.exec(str)
        console.log(result)  //['{{name}}', 'name', index: 7, input: '<div>我是{{name}}</div>', groups: undefined]
        // 字符替换
        str = str.replace(result[0], result[1])
        console.log(str)  //<div>我是name</div>

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>
  <script src="./lib/myTemplate.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>
    // 定义数据
    let data = {name: 'xz', age: 66, gender: '男', address: '港珠澳大桥下'}

    // 调用模板引擎
    let htmlStr = template('tpl-user', data)

    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr
  </script>
</body>

</html>

在这里插入图片描述

荻风溪畔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax2day(serialize()函数一次获取form全部数据，art-template模板引擎下载及使用方法步骤。正则表达式实现模板引擎)

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到actionURL的行为，叫做表单的同步提交。表单同步提交后，整个页面会发生跳转，跳转到actionURL所指向的地址，用户体验很差。表单同步提交后，页面之前的状态和数据会丢失。解决方案表单只负责采集数据，Ajax负责将数据提交到服务器。步骤如下//1.监听表单按钮的提交事件$('#formAddCmt').submit(function(e){art-template中文官网首页为。......
复制链接

扫一扫