Ajax02 表单和ajax结合使用|模板引擎便捷展示

表单简介

• 表单的组成部分

  • form标签容器

  • 表单域：input 标签，textarea。。select、、

  • 提交按钮：<input type = “submit”>

    <button type = “submit”>提交</button>

• 表单操作的特点：

• 提交数据时会出现跳转的情况

• form标签的属性

• action target method enctpe

• 常用的使用方式：

  • 使用表单进行数据采集（用输入框等元素获取输入内容），使用ajax进行请求发送即可（提交）

阻止标签的默认行为

在submit事件中，设置e.even

<a href="http://www.baidu.com">跳转到百度</a>
$("a").on("click",function(e){
e.preventDefault();//阻止默认行为
return false;//或者返回false也可阻止跳转
})

//form 标签
<form action="http://www.baidu.com">
    <input type="submit">
</form>

表单和ajax结合使用

快速获取表单中的数据

1.serialize（）函数

• 作用：可以快速获取表单中的数据（只能获取纯文本数据）

• 使用方式：$(form的选择器).serialize()

• 结果形式:

  • 名= 值&名=值&名=值…

• 注意：这两种内容格式可以通过$.get $.ajax进行直接发送

<form id="form1">
        <input type="text" name = "uesername"/>
    <input type="password" name = "password"/>
    <input type="submit" value="提交">
</form>
$("#form1").serialize()

表单元素的reset（）方法可以重置表单中的数据 （DOM方法 jQuery没有）

模板引擎

• 传统方式的字符串拼接比较麻烦，html与js书写在一起不方便维护
• 模版引擎：可以将生成结构的字符串拼接操作简化。

art-template使用，官网下载js文件

• 使用步骤：
  • 引入template-web.js
  • 准备数据（通常为请求得到的数据）
  • 准备模板
    • 使用script标签，设置type为 text/template，设置id
    • 内部书写需要的结构内容
    • 结构模板语法进行操作
  • 调用template方法处理
    • template（id名，数据）
    • 返回值为将数据和模板结合后得到的字符串

//1.引入模板引擎的js文件
<script src = "template-web.js"></script>
//2.定义模板
//模板使用script标签，将type设置为非js格式，推荐写为text/template
<script type="text/template" id = "template">
{{$data}}
//data的属性可直接写属性：
	<div><p>{{name}}</p></div>  
	<div><p>{{age}}</p></div>
	<div><p>{{sex}}</p></div>
 </script>

<script>
    var data = {
        name: "jack",
        age:18,
        sex:"男",
        love：["吃","喝","玩"]}
</script>
//在js中引入模板结构内容
//参数1：模板的id名  参数2：要传入的数据
var htmlStr = template("template",data);
document.getElementById("box").innerHTML =htmlStr;

##模板引擎的语法

• {{}}基本值的访问方式

  • {{}}是模板的基本标记，标记中会进行模板与法的执行，标记外原样输出
  • {{$data}}代表template()的参数2
  • {{$data.属性名}}用于访问$data的属性
    • 简写形式{{$data的属性名}}也表示访问$data的属性

• {{@数据}}

  • 如果数据中含有html标签结构，可以生成，如果不加@就不会生成

• {{each}} 模板数据遍历

  • 可以统一遍历数组和对象两种形式
  • 在each中$index和$value是模板默认提供的名称，$index代表索引/属性名$value 代表元素值/属性值
  • 可以通过自定义名称替换$index与$value

• 过滤器

  • 作用：用来对模板中某些数据进行处理的一个方法
  • 设置方式：
    • 在调用模板功能前设置

  <script type="text/template" id = "template">
  {{time|过滤器名称}}
  </script>
  <script>
      var data123={
          time:1578125356223
      }
  template.defaults.improts.过滤器名称 = function(time){数据处理程序，return 数据}
  </script>
  

  • 过滤器的返回值，会作为模板中最终展示的数据
  • 模板中的写法

  {{time}}这是普通的输出方式
  {{time|过滤器名称}} 这是通过过滤器进行处理的一个方法
  

模板引擎实现方式

正则表达式：

• 对字符串进行匹配、替换、

• 正则.test(); 匹配：检测字符串是否满足某些规则；

• 字符串.replace(); 替换；

• 字符串.match(); 正则.exec(); 提取：将满足规则的内容取出；

1. exec()正则提取方法：

• 参数：要进行提取的字符串
• 返回值：提取到的内容所在的数组
• 规则：每次提取到一个新内容，再次调用再取新内容，取不到时返回null

var str = '姓名:{{name}}年龄:{{age}}';
var reg = /{{[a-z]+}}/g;
console.log(reg.exec(str));//"{{name}}"
console.log(reg.exec(str));//"{{age}}"
console.log(reg.exec(str)); //null

• 如果希望提取所以满足规则的内容，可以进行while循环

• 凡是被括号包裹的部分，也会进行单独提取！

.可以取到除了换行符以外的所有字符

exec()的特点是每次调用后，结果都会累计

2.replace()

• 参数1可以为普通字符串，也可以为正则表达式

match和exec的小区别：

• 用法区别

• 功能区别：

  • match可以一次提取所有数据，但是没法分组

  • exec每一次取一个，可以分组