学习记录---02 ajax---客户端模板引擎-FormData-二进制文件上传

本文链接：https://blog.csdn.net/poppy995/article/details/95721753

客户端模板引擎

无论是客户端模板引擎还是服务器端模板引擎主要的作用就是通过模板引擎将数据和HTMl拼接起来

客户端模板引擎使用的也是art-template

http://aui.github.io/art-template/zh-cn/

使用步骤

下载art-template模板引擎库文件并在HTML页面中引入库文件
准备art-template模板
在HTML中没有模板的块语法所以这里通过script进行划分模板通过id属性与其他script进行区分
在script中写html语法所以要在script 的type设置为text/html
告诉模板引擎将哪一个模板和哪一个数据进行拼接
template(‘模板id’,数据对象) ------返回值是拼接好的字符串
将拼接好的html字符串添加到页面中
通过模板语法告诉模板引擎，数据和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>
  <!-- 1.引入art-template模板引擎 -->
  <script src="./template-web.js"></script>
</head>
<body>
  <div id = 'test'></div>
  <!--2.创建模板  -->
  <script id = "tpl" type = "text/html">
    <!-- 使用模板语法添加数据 -->
    <h2>{{username}} {{pwd}}</h2>
  </script>
  <!-- 3.使用模板引擎拼接数据 -->
  <script>
    //使用template方法指定数据和模板  返回值为字符串
    var html = template('tpl', {username:'zhangsan',pwd:'123456'});
    //将html字符串添加到html页面中
    console.log(html)
    document.getElementById('test').innerHTML = html;
  </script>
</body>
</html>

一些案例的步骤

验证邮箱地址的唯一性
1. 获取文本框为其添加焦点离开事件
2. 离开焦点，检测用户输入的邮箱地址是否符合规则
3. 不符合规则阻止程序向下执行并给出提示信息
4. 向服务器端发送求，检测邮箱地址是否被注册
5. 根据服务器端返回值决定客户端显示何种提示信息
搜索框内容自动提示
1. 获取搜索框并为其添加用户输入时间
2. 获取用户输入的关键字
3. 向服务器端发送请求并携带关键字作为请求参数
4. 将响应数据显示在搜索框底部
用户在文本框输入的时候触发的事件oninput
省市区三级联动
1. 通过接口获取省份信息
2. 使用js获取到省市区下拉框元素
3. 将服务器端返回的省份信息显示在下拉框中
4. 为下拉框元素添加表单值改变事件
5. 为用户选择省份时，根据省份id获取城市信息
6. 当用户选择城市时，根据城市id获取县城

FormData

—>构造函数接收一个HTML表单DOM对象

作用

模拟HTML表单，相当于将HTML表单映射为表单对象，自动将表单对象中的数据拼接成请求参数的格式
异步上传二进制文件

使用步骤

准备HTML表单
不需要表单提交地址不需要提交按钮一定要有name属性

<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="确定" id = "btn">
</form>

将HTML表单转化为formData对象
可以将表单控件的数据自动拼接成请求数据的格式
```
var form = document.getElementById('form');
var formData = new FormData(form);
```
提交表单对象
```
  xhr.send(formData)
```
formData不能通过get方式的获取

代码示例

<!-- 创建form表单 -->
<form id="form">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="button" value="确定" id="btn">
</form>
<script>
  var form = document.getElementById('form');
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    var formData = new FormData(form);
    console.log(formData);
    //创建ajax对象
    var xhr = new XMLHttpRequest();
    //配置ajax
    xhr.open('post','http://localhost:3000/formData');
    xhr.send(formData)
  }
</script>

FormData对象的实例方法

获取表单对象中属性的值
formData.get('key');
设计表单对象中属性的值存在这个值则就替换该值不存在这个值则会创建这个值
formData.set('key','value');
删除表单对象中的属性值
formData.delete('key');
向表单对象中追加属性值
formData.append('key','value');
set和append方法的区别在属性名已存在的情况下 set覆盖 append保留两个值