表单相关操作
表单应用场景
通过表单，用户可以向服务器提交数据信息，比如注册账号、登录账号、发微博.....
用户与网站的交互方式：基于表单提交数据（富文本）
表单基本结构
form标签
表单输入域
提交按钮
<form action="/login" target="_blank" method="post">
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
-
提交表单：输入域的name属性必须提供并且要与后台要求的名称匹配
-
form标签的核心属性
action 表示提交的后台url地址
method 表示提交的方式
-
<form action="http://www.liulongbin.top:3006/api/addbook" method="post">
<div>
<label for="bookname">图书名称：</label>
<input type="text" name="bookname" id="bookname">
</div>
<div>
<label for="author">图书作者：</label>
<input type="text" name="author" id="author">
</div>
<div>
<label for="publisher">图书出版社：</label>
<input type="text" name="publisher" id="publisher">
</div>
<div>
<!-- input的type如果是submit，那么点击时自动提交 -->
<input type="submit" value="提交">
<!-- button按钮默认有提交动作 -->
<!-- <button>提交</button> -->
</div>
</form>
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
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
- 列表渲染each
{{each hobby}}
<li>索引是:{{$index}}，循环项是:{{$value}}</li>
{{/each}}
- 过滤器用法
// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
// 使用过滤器
<h3>{{regTime | dateFormat}}</h3>
原生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种类型
