2020-04-10 Ajax

表单相关操作

表单应用场景

• 通过表单，用户可以向服务器提交数据信息，比如注册账号、登录账号、发微博.....

• 用户与网站的交互方式：基于表单提交数据（富文本）

表单基本结构

• form标签

• 表单输入域

• 提交按钮

提交
 

• 提交表单：输入域的name属性必须提供并且要与后台要求的名称匹配

  • form标签的核心属性

    • action 表示提交的后台url地址

    • method 表示提交的方式

图书名称：



图书作者：



图书出版社：








 

Form标签属性

• action 提交到后端的地址，如果不写，默认表示当前页面

• method 请求方式

• target 打开action地址的方式

  • _blank 表示打开一个新的页面

  • _self 表示在当前页面刷新

• enctype 发送数据的编码方式

  • 默认值 application/x-www-form-urlencoded

  • 用于文件上传 multipart/form-data

form常用类型标签

• 普通文本框 text

• 密码框 password

• 下拉选框 select

• 多行文本框 textarea

• 单选框 radio

• 多选框 checkbox

• 隐藏域 hidden

• ......

传统表单提交的问题与解决方法

• 表单页面在提交后会发生跳转

• 解决办法：使用Ajax方式提交表单

• 基于Ajax提交表单

  • 监听表单提交事件

  • 阻止表单默认提交行为

  • 快速获取表单数据

var formData = $('#form').serialize()
$.post('http://www.liulongbin.top:3006/api/addbook', formData, function (res) {
console.log(res)
}) 

模板引擎

模板引擎概念介绍

• 不使用模板引擎的问题：字符串拼接不规范

• 模板引擎引入了一套标准的模板语法

  • 数据 + 模板 = HTML标签片段

熟悉art-template

• 官网

模板引擎基本用法

• 将用户信息渲染到页面：模板引擎方式

  • 导入art-template

  • 定义模板

  • 获取数据

  • 调用template方法渲染页面

模板语法详解

• 标准语法 {{}}
  • 原始信息显示

{{@ test}}

• 条件渲染

  • if

  • else if

{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
 

• 列表渲染each

{{each hobby}}
索引是:{{$index}}，循环项是:{{$value}}
{{/each}} 

• 过滤器用法

// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
// 使用过滤器
{{regTime | dateFormat}}
 

原生Ajax

原生Ajax基本用法

• XMLHttpRequest 浏览器对Ajax的实现
• 基本使用步骤
  • 创建xhr对象
  • 调用xhr.open()方法
  • 调用xhr.send()方法
  • 监听xhr.onreadystatechange事件

xhr对象详解-响应状态

• readyState
• status

xhr对象详解-请求参数

• get请求方式传参
  • url地址查询字符串
  • url编码
    • encodeURI() 编码函数
    • decodeURI() 解码函数
• post请求方式传参
  • 设置请求头

xhr对象详解-响应数据

• 数据格式分析
  • xml
  • json
• JSON基本规则
  • 数据结构为键值对
  • key 必须是使用英文的双引号包裹的字符串
  • 字符串类型的值必须使用双引号包裹
  • JSON 中不能写注释
  • JSON 的最外层必须是对象或数组格式
  • 不能使用 undefined 或函数作为 JSON 的值
  • value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型