关于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-接口表单模板引擎

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）