Ajax（二）表单的使用和art-template模版引擎

Ajax（二）表单的使用和art-template模版引擎

一、表单的基本使用

1、什么是表单（form）

form 表单主要是用来采集用户的信息 。

2、表单的组成部分

<form >
        <!-- 文本域 -->
        <input type="text" placeholder="请输入用户名" name="uname">
        <input type="password" placeholder="请输入密码" name="password">
        <input type="checkbox" name="remember" checked>

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>

• 表单标签
• 表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等(隐藏域（hidden）、文件上传框（file）、复选框（checkbox）)
• 表单按钮：通过设置type属性为submit来触发form表单的提交

3、表单的标签属性

1. action 属性

   ​ 决定了表单的数据提交到何处, 一般是一个 url 地址; 如果没有指定, 默认提交到当前页面

2. target 属性

   ​ 规定了在何处打开 url, 默认值是 _self (当前标签页), _blank 表示在新标签页打开

3. method 属性

   ​ 使用何种方式把表单数据提交到 url, 默认的方式是 GET 方式, 还可以指定 POST 提交

4. get 和 post 提交数据的特点

   ​ 简单的数据提交使用 get, 复杂或隐蔽的数据使用 post

5. enctype 属性 (编码方式)

   规定了在发送表单数据之前如何对数据进行编码

   默认是: (1) application/x-www-form-urlencoded 表示在发送前编码所有的字符（默认）

   (2) multipart/form-data 不对字符进行编码, 在传输文件时必须使用这个值(二进制，文件上传)

   (3) text/plain 空格转成 + 号, 不对特殊字符进行编码 (少用)

4、表单的同步提交及缺点

• 表单的同步提交

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

• 缺点：

1. 页面会刷新

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

• 解决：

  使用 Ajax 提交数据, 表单只负责采集数据, 页面不会自动刷新

二、Ajax提交表单数据

1、监听表单提交事件

• 两种方法都可：

$('form').submit(function(e){
    alert('监听到了表单提交事件');
});

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

2、阻止表单默认提交行为

调用event.preventDefault()函数，来阻止表单的提交和页面跳转。

 $('form').submit(function(e) {
                e.preventDefault(); //组织默认事件
 })

3、快速获取表单数据

serialize() 函数，可以一次性获取表单数据。

$('form').serialize();
//username=abc&password=123

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

三、art-template模版引擎

1、简介

art-template 是一个简约，超快的模板引擎，中文官首页：http://aui.github.io/art-template/zh-cn/index.html

• 作用：

  实现模板 (HTML结构) 和 数据对象的拼接

2、安装

3、基本使用

1> 引入插件

2> 定义数据对象

3> 定义模板结构

<scripte type="text/html" id="tpl">
    //code
    </script>

4> 调用模板方法实现拼接

• template(id, obj)

5> 渲染拼接好的 HTML 字符串

4、好处

(1) 代码结构清晰 (2) 减少字符串拼接 (3) 使代码易于维护

5、模版引擎语法

1. 所有的变量和表达式, 使用双花括号包裹, 进行输出 {{ true ? ‘a’ : ‘b’ }}

2. 原文输出 {{@value}}

3. 条件输出

   {{if value}}

   …

   {{else if value}}

   …

   {{/if}}

4. 遍历输出

   {{each target}}

​ {{$index}}

​ {{$value}}

{{/each}}

<script type='text/html' id='11'>
        <p>{{name}}</p>
        <p>{{num-5}}</p>
        <p>{{color?'黄色':'绿色'}}</p>
        <!-- 输出原来的<h3>爱吃香蕉</h3> -->
        <p>{{@info}}</p>
        <!-- 条件输出  -->
        {{if num
        < 10}} <h3>15元</h3>
            {{else if num>=15}}
            <h3>12元</h3>
            {{/if}};
            <!-- 遍历输出  -->
            {{each kinds}}
            <li>{{$index}} ---- {{$value}}</li>
            {{/each}}
    </script>
    <script>
        var obj = {
            name: 'banana',
            num: 15,
            color: true,
            info: "<h3>爱吃香蕉</h3>",
            kinds: ['海南香蕉',
                '广东香蕉',
                '老挝香蕉',
                '台湾香蕉'
            ]
        }
        var res = template('11', obj);
        $('body').append(res);
    </script>

6、模版引擎的过滤器（函数）

<script type="text/html" id='foo'>
        <div>{{time|dateFormat}}</div>
    </script>
    <script> template.defaults.imports.dateFormat = function(time) {
           var date = new Date(time);
           var year = date.getFullYear();
           var month = date.getMonth() + 1;
           var day = date.getDate();
           return year + '年' + month + '月' + day + '日';
        };
        var res = template('foo', {
            time: '2021-1-20'
        });
        $('body').append(res);
    </script>

7、正则表达式方法

1.复习

• \d表示[0-9]任意数字

• \D表示非数字

• \s表示所有的空格

• \S表示非空格

• \w表示[a-zA-Z0-9_]任意一个字符

• \W表示[a-zA-Z0-9_]之外的任意一个字符

• /123(\w*)456/ 正则表示式中的小括号表示提取分组

2. reg.exec(str)

从字符串中依次去查找符合正则的字符内容, 返回一个数组 或 null

注意：exec方法每次只能找到符合正则条件的第一个字符内容

		 var reg2 = /c(\d+)d/;
        var res2 = reg2.exec('abc123def456');
        console.log(res2);
        console.log(res2[0], res2[1]); 							//c123d   123		
//返回数组的第一项表示匹配的完整字符，第二项表示分组中匹配的内容

3.str.replace(reg, val2)

从字符串中获取匹配正则的内容进行替换

		var str = 'abc123def456---c123d';
        str = str.replace(/c(\d+)d/g, function(item1, item2) {
         // g表示全局匹配		item1表示匹配的完整字符，item2表示分组中匹配的内容
         console.log(item1, item2);
         return item2 + 'hello';
        });
        console.log(str);
		//ab123helloef456---123hello

8、模板引擎的原理

个人理解：即先将{{username}}替换为username，然后利用回调函数，将对象中的username值返回给username，完成最终的替换

 		var str = '<div>{{username}}---{{age}}----</div>';
        var obj = {
            username: '小明',
            age: 12
        };
        str = str.replace(/{{\s*(\w+)\s*}}/g, function(item1, item2) {
            console.log(item1, item2);
            return obj[item2];
        });
        console.log(str);