Ajax：客户端与服务器、ajax简介、form标签及其属性、模板引擎

生命中有两大自由：思想自由和行动自由

文章目录

客户端与服务器

客户端：负责获取和消费资源
服务端：负责存放和对外提供资源
- 图片、文字、音频、视频、数据(网页的灵魂)
通信过程
- 客户端请求服务器
- 服务器处理这次请求
- 服务器响应客户端
url地址
- 中文叫：统一资源定位符
- 组成部分：通信协议、服务器名称、资源在服务器上具体的存放位置
资源的请求方式
- GET：获取服务器资源
- POST：向服务器提交数据

ajax简介

定义：ajax的全称是Asynchronous Javascript And XML(异步javascript和XML)
作用：实现网页与服务器之间的数据交换
应用场景
- 用户名检测：注册时检测用户名是否被占用
- 搜索提示：输入关键字时，加载搜索提示列表
- 数据分页显示：当点击页码值的时候，根据页码值刷新表格的数据
- 数据的增删改查：数据的添加，删除，修改，查询
ajax全局事件
- $.ajaxStart(callback)：请求开始时触发
- $.ajaxStop(callback)：请求结束时触发
- $.ajaxComplate：请求完成时触发
- $.ajaxError：请求发生错误时触发
- $.ajaxSend：发送前触发
- $.ajaxSuccess：请求成功时执行的函数

form标签及其属性

action：表示表单提交的地址 (如果不指定action属性，默认会提交到当前页面)
method
- GET：适合较少量的数据 (用户输入的内容会显示在地址栏上)
- POST：适合提交大量的数据，包括文件上传 (用户输入的内容不会显示在地址栏上)
target
- _self：默认的方式，打开当前页面
- _blank：提交表单之后，打开一个新的标签页
enctype
- application/x-www-form-urlencoded：表示以字符串的方式提交数据
- multipart/form-data：如果有文件上传，则必须指定它
快速手机表单数据并通过ajax提交给接口
1. 给表单(form)注册submit事件
2. 一定要阻止默认行为
3. 使用jQuery提供的serialize()方法，快速收集表单数据
  - 表单各项一定要指定name属性，并且name属性的值要和接口要求的参数一致
4. 通过ajax提交数据到接口，从而完成添加功能

模板引擎

使用步骤
1. 引入template-web.js
2. 准备模板
  - 模板一般在前期html布局的时候都已经做好了
  - 模板要放到script标签里面
  - script标签标签要有type='text/html'属性，告诉浏览器里面的内容不是js，而是html
  - script标签要有id属性，后面调用template函数的时候会用到
3. 准备数据：通过ajax请求接口，得到数据
4. 调用template函数
  - 参数1：模板的id
  - 参数2：数据
  - 返回值：数据和模板组合好的一段html
5. 把组合好的html放到页面中指定的div即可

使用模板语法渲染数据

直接输出 {``{}}
原样输出 {``{@}}
条件判断 {``{if条件}}.....{``{else}.....{``{/if}}}
循环 {``{each 待遍历的数据 val key}} {``{val}} {``{/each}}
过滤器功能
- 模板中调用过滤器函数 {``{数据名称 | 过滤器函数名}}
- js中定义过滤器函数 template.defaults.imports.过滤器函数名 = function(形参){}

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>
  <!-- 渲染后的html -->
  <div id="wrap"></div>

  <!-- 2.准备模板 -->
  <script type="text/html" id="model">
    <!-- 定义模板 -->
  {{@title}}
  <div>姓名: {{name}}</div><br />
  <div>年龄: {{age}}</div><br />
  <div>会员:
    {{if isTV}}
    是
    {{else}}
      否
      {{/if}}
  </div><br />
  <div>爱好:
    {{each hobby val key}}
    {{val}}
    {{/each}}
  </div><br />
  <div>注册时间: {{regTime | timer}}</div>
  </script>

  <!-- 1.引入template-web.js -->
  <script src="lib/template-web.js"></script>

  <script>
    // 3.准备数据
    var data = {
      title: '<h3>用户信息</h3>',
      name: '艾丽莎',
      age: 24,
      isTV: true,
      hobby: ['唱歌', '敲代码', '读书'],
      regTime: new Date()
    }

    function zero(n) {
      return n < 10 ? '0' + n : n
    }
    // 过滤器功能
    template.defaults.imports.timer = function (time) {
      var year = time.getFullYear()
      var month = zero(time.getMonth() + 1)
      var date = zero(time.getDate())
      var hour = zero(time.getHours())
      var minute = zero(time.getMinutes())
      var second = zero(time.getSeconds())
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    }

    // 4.调用template函数 (参数1: 模板的id   参数2: 准备好的数据)
    var str = template('model', data)

    // 5.把组合好的html放到页面中指定的div中
    document.getElementById('wrap').innerHTML = str
  </script>
</body>

</html>

Data对象的说明

直接 new Data()得到一个对象，表示的时间是当前的时间
可以在new Data()的时候为其传入一个参数，然后new Data()就会根据传入的参数生成一个时间
new Date(175542255626) ==> Mon Apr 29 1974 13:32:24 GMT+0800 中国标准时间