表單相關(guān)操作
表單應(yīng)用場景
通過表單桑涎，用戶可以向服務(wù)器提交數(shù)據(jù)信息，比如注冊賬號、登錄賬號松蒜、發(fā)微博.....
用戶與網(wǎng)站的交互方式：基于表單提交數(shù)據(jù)（富文本）
表單基本結(jié)構(gòu)
form標(biāo)簽
表單輸入域
提交按鈕
<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標(biāo)簽的核心屬性
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擂涛，那么點(diǎn)擊時自動提交 -->
<input type="submit" value="提交">
<!-- button按鈕默認(rèn)有提交動作 -->
<!-- <button>提交</button> -->
</div>
</form>
Form標(biāo)簽屬性
action 提交到后端的地址读串，如果不寫，默認(rèn)表示當(dāng)前頁面
method 請求方式
-
target 打開action地址的方式
_blank 表示打開一個新的頁面
_self 表示在當(dāng)前頁面刷新
-
enctype 發(fā)送數(shù)據(jù)的編碼方式
默認(rèn)值 application/x-www-form-urlencoded
用于文件上傳 multipart/form-data
form常用類型標(biāo)簽
普通文本框 text
密碼框 password
下拉選框 select
多行文本框 textarea
單選框 radio
多選框 checkbox
隱藏域 hidden
......
傳統(tǒng)表單提交的問題與解決方法
表單頁面在提交后會發(fā)生跳轉(zhuǎn)
解決辦法：使用Ajax方式提交表單
-
基于Ajax提交表單
監(jiān)聽表單提交事件
阻止表單默認(rèn)提交行為
快速獲取表單數(shù)據(jù)
var formData = $('#form').serialize()
$.post('http://www.liulongbin.top:3006/api/addbook', formData, function (res) {
console.log(res)
})
模板引擎
模板引擎概念介紹
不使用模板引擎的問題：字符串拼接不規(guī)范
-
模板引擎引入了一套標(biāo)準(zhǔn)的模板語法
- 數(shù)據(jù) + 模板 = HTML標(biāo)簽片段
熟悉art-template
模板引擎基本用法
-
將用戶信息渲染到頁面：模板引擎方式
導(dǎo)入art-template
定義模板
獲取數(shù)據(jù)
調(diào)用template方法渲染頁面
模板語法詳解
- 標(biāo)準(zhǔn)語法 {{}}
- 原始信息顯示
{{@ test}}
-
條件渲染
if
else if
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
- 列表渲染each
{{each hobby}}
<li>索引是:{{$index}}撒妈，循環(huán)項是:{{$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的實(shí)現(xiàn)
- 基本使用步驟
- 創(chuàng)建xhr對象
- 調(diào)用xhr.open()方法
- 調(diào)用xhr.send()方法
- 監(jiān)聽xhr.onreadystatechange事件
xhr對象詳解-響應(yīng)狀態(tài)
- readyState
- status
xhr對象詳解-請求參數(shù)
- get請求方式傳參
- url地址查詢字符串
- url編碼
- encodeURI() 編碼函數(shù)
- decodeURI() 解碼函數(shù)
- post請求方式傳參
- 設(shè)置請求頭
xhr對象詳解-響應(yīng)數(shù)據(jù)
- 數(shù)據(jù)格式分析
- xml
- json
- JSON基本規(guī)則
- 數(shù)據(jù)結(jié)構(gòu)為鍵值對
- key 必須是使用英文的雙引號包裹的字符串
- 字符串類型的值必須使用雙引號包裹
- JSON 中不能寫注釋
- JSON 的最外層必須是對象或數(shù)組格式
- 不能使用 undefined 或函數(shù)作為 JSON 的值
- value 的數(shù)據(jù)類型可以是數(shù)字恢暖、字符串、布爾值狰右、null杰捂、數(shù)組、對象6種類型
