关于javascript:ajax-接口表单模板引擎

明天持续ajax的一个学习，首先明确一个观点，接口，什么是接口，当应用ajax申请数据时，被申请的url就叫做数据接口也就是接口，留神每个接口必须有申请形式，这里有一个接口的测试工具，postman自称是寰球最快的，反正应用起来没多大故障，应用这个软件的时候有一个留神点就是在post申请的时候，在body外面输出参数要抉择x-www-form-这个选项才行，而后是接口文档，咱们如果要调用接口，那必定是要参照接口文档的，外面的蕴含这个接口的所有信息，个别一个接口文档大抵分为以下五个内容：

①接口名称：可能一眼看出这个接口是个什么类型的接口

②url：这个不必多说，接口的调用地址

③调用形式：会给你阐明这个接口要用get还是post

④参数格局：接口需传递的参数，每个参数必须蕴含参数名称、参数类型以及参数阐明

⑤响应格局：接口返回值的形容，个别蕴含数据名称类型阐明

而后持续看到一个广泛利用，表单，咱们说的form表单个别是拿来收集数据的，而后再form外面有一些属性比方

action示意向何处发送表单数据，如果未指定就是以后页面

target是在何处关上这个action，就跟a标签的一样

method是发送action的形式能够为get或者post默认是get，get适宜用来提交一些简略数据的，post适宜提交简单数据，咱们在我的项目中用到post居多

enctype是规定发送表单数据前如何对数据进行编码，个别默认是后面提到的x-www-form-urlencoded，然而这里要留神下如果说是蕴含文件上传的表单的话，这里的值要改为multipart/form-data

持续看到表单的同步提交，就是当你一点击提交，页面就会产生跳转到action的地址下来，这样的用户体验极差，而且页面之前的数据和状态都会失落，怎么来解决这一景象，咱们只须要让表单控件负责采集数据，ajax来负责提交即可。

如果要用到ajax跟表单的一个配合，首先要晓得一个事件也就是submit提交事件，而后在这外面组织表单默认行为，因为每次一点提交就会刷新页面，而后通过一个函数可疾速获取到表单的数据，。serialize（）应用这个有个前提就是必须为表单外面每个元素增加name属性就像面这样

<!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>
</head>
<body>
    <form action="/login">
        <input type="text" name="uname">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="../day01/lib/jquery.js"></script>
    <script>
        $('form').on('submit', e => {
            console.log(11);
            e.preventDefault()
            // 这里闹了个大乌龙，刚开始我是用的$(this)我就说为什么始终获取不到数据思来想去也就是这里的问题应该，起初才晓得我这里明明用的是
            // 箭头函数啊，箭头函数的this是谁啊能乱用吗？
            var str = $('form').serialize()
            console.log(str);
        })
    </script>
</body>
</html>

案例：评论列表，页面还是才去bootstrap，vscode可装置bs3实现疾速bootstrap编程，这个案例就是通过接口先获取评论列表的数据，渲染到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>
    <link rel="stylesheet" href="../day01/lib/bootstrap.css">
    <script src="../day01/lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
    
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
          </div>
          <div class="panel-body">
              <form>
                <div>评论人</div>
                <input type="text" class="form-control" name="username">
                <div>内容</div>
                <textarea class="form-control" name="content"></textarea>
                <button type="submit" class="btn btn-primary">发表评论</button>
              </form>
          </div>
    </div>
    

    
    <ul class="list-group">
        
          
    </ul>
    <script>
        // 1.获取评论列表数据
        function getComment() {
            $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/cmtlist',
            success : res => {
                console.log(res);
                if (res.status !== 200) {
                    return alert('获取评论列表失败')
                } else {
                    $('.list-group').empty()
                    $.each(res.data, (i, item) => {
                        $('.list-group').append(`<li class="list-group-item">
            <span class="badge" style="background-color: #f0ad4e;">评论工夫：${item.time}</span>
            <span class="badge" style="background-color: #5bc0de;">评论人：${item.username}</span>
            ${item.content}
        </li>`)
                    })
                }
            }
        })
        }
        getComment()
        // 2.发表评论
            $('form').on('submit', function(e) {
                e.preventDefault()
               var str = $('form').serialize()
            //    console.log(str);
                $.post('http://www.liulongbin.top:3006/api/addcmt', str,res => {
                    if (res.status !== 201) {
                        return alert('发表评论失败')
                    } else {
                        getComment()
                        // 2.1 提交胜利后应该将表单的内容清空，这里有个快捷办法，间接将form用她的reset办法，然而要先将jq转为原生对象
                        $('form')[0].reset()
                    }
                })
            })
    </script>
</body>
</html>

持续看到一个概念叫做模板引擎，看过我之前的案例都晓得，咱们之前渲染ul的时候都是采取的字符串拼接的形式，对res外面的数据进行遍历，进行字符串拼接，而重复的进行字符串拼接产生的影响就不多多说了吧，大量消耗内存资源，所以这个时候就产生了一种模板引擎就是程序员依据指定模板构造和数据，主动生成一个残缺的html界面。

那么当下比拟优良的模板引擎之一 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>
</head>
<body>
    <div></div>
    <script src="../day01/lib/jquery.js"></script>
    <!-- 1.首先第一步必定是要导入下载的template模板版引擎js -->
    <script src="./template-web.js"></script>
    <script type="text/html" id="model">
        <!-- // 3.而后第三步定义模板留神也是script来书写，而后还有一个留神点因为平时写的script基本上是text/JavaScript意思就是script外面解析的
        // 的是js代码，然而这里咱们既然是html模板所以就不能忆原来那种形式来默认
-->        
 <!-- 这样一增加，连正文都变了 -->
 <!-- 3.1这里还有一个留神点，在template模板外面变量的占位符是两个花括号 -->
 <!-- 3.2这里外面的变量写什么就写数据外面的属性名即可 -->
        <span>{{name}}</span>
    </script>
    <script>
        // 2.导入后其实在js当中就存在了一个template的函数，你一输的话它是有关键字进去的
        // 第二步须要定义数据
        var data = {name : '张三'}
        // 4.定义完后持续在这里调用template函数
        // 4.1这个函数有两个参数，也是为什么后面要定义两个货色的起因，第一个参数是模板的id(这个id增加在刚在定义模板的script中,而且并不必写#)，第二个参数是须要渲染的对象
        // 4.2调用完后会有一个返回值留神用一个变量去存储
        var strHtml = template('model', data)
        // 5.都完结后就是最初的渲染到HTML中
        console.log(strHtml);
        $('div').html(strHtml)
        </script>
        

</body>
</html>

对于模板引擎的应用记住下面我说的步骤就行了，在这个定义模板外面咱们用到了一个占位符｛｛｝｝这个外面的写法是有考究的，咱们叫做规范语法

①失常输入能够在外面写{{value/obj.key/arr[0]/a ? a : b}} 这些简略简单数据都是能够写在外面的

②原义输入就是如果value是一个html构造那么你要让他在渲染的时候显示进去就须要在后面增加一个@ {{@value}}

③条件输入 {{if 条件}} 执行语句 {{/if}} 当然你能够在两头交叉{{else if 条件}}

④循环输入 {{each 循环的变量}} 在这外面有两个值能够应用 {{$value}}以后乡的值 {{$以后项的索引}} {{/each}}

⑤过滤器就是当你对{{value}}的值不称心的时候你能够{{value | filterName}} 而后再js代码外面template.defaults.imports.filterName = function(value) {}对这个值进行批改，留神return出这个处理结果，这个filtername是能够自定义的

<!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>
</head>
<body>
    <div></div>
    <script src="../day01/lib/jquery.js"></script>
    <!-- 1.首先第一步必定是要导入下载的template模板版引擎js -->
    <script src="./template-web.js"></script>
    <script type="text/html" id="model">
        <!-- // 3.而后第三步定义模板留神也是script来书写，而后还有一个留神点因为平时写的script基本上是text/JavaScript意思就是script外面解析的
        // 的是js代码，然而这里咱们既然是html模板所以就不能忆原来那种形式来默认
-->        
 <!-- 这样一增加，连正文都变了 -->
 <!-- 3.1这里还有一个留神点，在template模板外面变量的占位符是两个花括号 -->
 <!-- 3.2这里外面的变量写什么就写数据外面的属性名即可 -->
        <span>{{name}}</span>
        <div>{{regTime | dateFormat}}</div>
    </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.导入后其实在js当中就存在了一个template的函数，你一输的话它是有关键字进去的
        // 第二步须要定义数据
        var data = {name : '张三',regTime : new Date()}
        // 4.定义完后持续在这里调用template函数
        // 4.1这个函数有两个参数，也是为什么后面要定义两个货色的起因，第一个参数是模板的id(这个id增加在刚在定义模板的script中,而且并不必写#)，第二个参数是须要渲染的对象
        // 4.2调用完后会有一个返回值留神用一个变量去存储
        var strHtml = template('model', data)
        // 5.都完结后就是最初的渲染到HTML中
        console.log(strHtml);
        $('div').html(strHtml)
        </script>
        

</body>
</html>

咱们持续看到正则与字符串的操作，其实解释来看一下模板引擎的一个原理，首先明确一个正则的函数。exec（）能够检索字符串中满足正则表达式的，有就返回，没有就返回null。

而后是分组咱们将正则外面用括号包起来的内容叫做一个分组，能够通过分组来提取想要的内容。

而后看到replace，其实这些包含正则后面都说过的也能够看后面的一个博文，replace就是字符串的替换办法，能够将参数外面后面一个替换为前面一个。先说到这里看一个代码

<!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>
</head>
<body>
    <script>
        let str = '我是{{name}}'
        let reg = /{{([a-zA-Z]+)}}/
        let regResult = reg.exec(str)
        console.log(regResult);
    </script>
</body>
</html>

屡次replace

<!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>
</head>
<body>
    <script>
        let str = '我叫{{name}}往年{{age}}岁了'
        let reg = /{{\s*([a-zA-Z]+)\s*}}/
        str1 = reg.exec(str)
        str = str.replace(str1[0],str1[1])
        console.log(str);
        str1 = reg.exec(str)
        str = str.replace(str1[0],str1[1])
        console.log(str);
        str1 = reg.exec(str)
        console.log(str1);
    </script>
</body>
</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>
</head>
<body>
    <script>
        var str = '我叫{{name}}往年{{age}}岁了'
        var reg = /{{\s*([a-zA-Z]+)\s*}}/
        var result = reg.exec(str)
        while (result) {
            str = str.replace(result[0], result[1])
            result = reg.exec(str)
        }
        console.log(str);
    </script>
</body>
</html>

而后replace替换为真值，很简略很小的一个改变

<!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>
</head>
<body>
    <script>
        var data = {name : '张三', age : 19}
        var str = '我叫{{name}}往年{{age}}岁了'
        var reg = /{{\s*([a-zA-Z]+)\s*}}/
        var result = reg.exec(str)
        while (result) {
            str = str.replace(result[0], data[result[1]])
            result = reg.exec(str)
        }
        console.log(str);
    </script>
</body>
</html>

ok这一系列完结过后咱们本人就能够来定义一个简易版的模板引擎，把方才说的正则字符串与模板引擎的规定联合起来

<!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 class="box"></div>
    <!-- 1.定义模板构造 -->
    <script type="text/html" id="model">
        <div>姓名：{{name}}</div>
        <div>年龄：{{  age  }}</div>
        <div>性别：{{  gender}}</div>
        <div>住址：{{address  }}</div>
    </script>
    <!-- 2.预调用模板引擎 -->
    <script>
        // 3.模板引擎函数
        // 2.1定义数据
        var data = {
            name : '张三',
            age : 14,
            gender : '男',
            address : '重庆市江北区'
        }
        // 2.2调用
        var strModel = template('model', data)
        console.log(strModel);
        // 2.3渲染
        document.querySelector('.box').innerHTML = strModel
    </script>
</body>
</html>

前端爱好者，望大佬给个内推机会！！！

关于javascript:ajax-接口表单模板引擎

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:ajax-接口表单模板引擎

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复