Ajax工作流程
Ajax:在不刷新頁面的情況下向服務器請求數據
1.創建XMLHttpRequest對象(俗稱小黃人)
var xhr = new XMLHttpRequest();
XMLHttpRequest ： http請求對象，負責實現ajax技術
2.設置請求
xhr.open('get', 'url');
url:服務器地址
3.發送請求
xhr.send();
4.注冊回調函數
xhr.onload = function () {
console.log(xhr.responseText);
}
xhr.responseText:請求返回的內容
這個函數不是立即執行的，而是等服務器把數據響應返回才會執行(PS：什么時候執行取決于你的網速快慢)
get請求
案例:英雄外號
接口文檔：查詢英雄外號
請求地址：https://autumnfish.cn/api/hero/simple
請求方法：get
請求參數：name
1.get傳參格式：url?key=value
2.示例： https://autumnfish.cn/api/hero/simple?name=亞索
Documenttitle>text-align: center;
}
.name {
color: deepskyblue;
}
.title {
color: red;
}style>
head>
英雄查詢h1>
span>---span>h2>
body>
html>
/*
- 請求地址：https://autumnfish.cn/api/hero/simple
- 請求方法：get
- 請求參數：name
- 響應內容：英雄外號
*/
/*思路分析
1.給search按鈕注冊點擊事件
2.獲取hero輸入框文本
3.通過ajax調用接口：參數為輸入框文本
4.數據返回之后顯示到title標簽中
*/
//1.注冊點擊事件
$('.search').on('click', function () {
//2.獲取輸入框文本
var heroName = $('.hero').val();
//3.ajax請求數據
//(1).實例化ajax對象
var xhr = new XMLHttpRequest();
//(2).設置請求方法和地址
//get請求的數據直接添加在url的后面 格式是 url?key=value
xhr.open('get', 'https://autumnfish.cn/api/hero/simple?name=' + heroName);
//(3).發送請求
xhr.send();
//(4).注冊回調函數
xhr.onload = function() {
$('.title').text(heroName + ':' + xhr.responseText);
};
});script>
post請求
案例:用戶注冊
請求地址：https://autumnfish.cn/api/user/register
請求方法：post
請求參數：username
post請求：
1.需要設置請求頭(固定語法)：xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)
* 注意：這是固定格式，錯一個字母都不行，強烈建議復制粘貼
2.使用xhr的send方法發送參數： xhr.send(‘參數名=參數值’);
* 注意：不要加前面的?
Documenttitle>color: red;
}style>
head>
用戶注冊h2>
span>
body>
html>
/*
請求方法get和post區別： 傳參方式不同
get請求： 直接在url后面拼接參數
* 參數在url中，安全性不高
post請求：
1.需要設置請求頭(固定語法)：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
* 注意：這是固定格式，錯一個字母都不行，強烈建議復制粘貼
2.使用xhr的send方法發送參數： xhr.send('參數名=參數值');
* 注意：不要加前面的?
*/
/*
用戶注冊
- 請求地址：https://autumnfish.cn/api/user/register
- 請求方法：post
- 請求參數：username
1. 注冊點擊事件 : submit
2. 獲取輸入框文本：username
3. 通過ajax調用接口：參數為輸入框文本
4. 數據返回之后顯示到info中
*/
$(function () {
//1.注冊點擊事件
$('.submit').on('click', function () {
//2.獲取輸入框文本
var username = $('.username').val();
//3.ajax發送請求
//(1).實例化ajax對象
var xhr = new XMLHttpRequest();
//(2).設置請求方法和地址
xhr.open('post', 'https://autumnfish.cn/api/user/register');
//(3).設置請求頭(post請求才需要設置)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//(4).發送請求 ： 參數格式 'key=value'
xhr.send('username=' + username);
//(5).注冊回調函數
xhr.onload = function () {
$('.info').text(xhr.responseText);
};
});
});script>
請求方法get和post區別
傳參方式不同
get請求：
直接在url后面拼接參數
* 參數在url中，安全性不高
post請求：
1.需要設置請求頭(固定語法)：xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’)
* 注意：這是固定格式，錯一個字母都不行，強烈建議復制粘貼
2.使用xhr的send方法發送參數： xhr.send(‘參數名=參數值’);
* 注意：不要加前面的?
JSON數據格式解析
JSON格式
通用的數據格式，很多語言都支持，不同語言中解析他的方式不同
js中對應JSON的使用 2個方法
JSON是一種數據格式，本質是字符串 作用： 解決跨平臺的問題，一般服務器返回的數據都是json格式
JSON格式特點 a. 屬性名和屬性值都是字符串(需要使用雙引號包括)
b. 如果屬性值是布爾類型和數字類型，則可以省略字符串
.JSON格式與JS對象互轉
JSON->JS : JSON.parse(json數據)
JS->JSON ：JSON.stringify(js對象)
模板引擎art-template
模板引擎art-template使用流程
1.導入模板引擎art-template.js文件
2.寫HTML模板
模板寫到script標簽中
必須要設置id
必須要設置type(一般為 type=“text/html”)
3.調用art-template的官方API開始解析模板
var htmlStr = template('tpl', jsonObj.data);
第一個參數： html模板的id名
第二個參數： 要渲染的數據
返回值： 渲染數據之后的html字符串
4.將解析好的模板顯示到頁面
document.body.innerHTML = htmlStr;
模板引擎語法介紹
輸出
標準語法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始語法
條件
標準語法
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始語法
...
... ...
循環
標準語法
{{each target}}
{{$index}} {{$value}}
{{/each}}
原始語法
ajax 項目經驗總結
1.模板引擎支持字符串的方法 indexOf() split()
2.如果一段代碼在多個地方執行,可以使用函數封裝
可以自己寫一個函數封裝
事件本事就是一種函數封裝,可以主動觸發事件
$().click
$().trigger(‘click’)
3.loading加載效果
布局思路:使用gif動圖實現
實現思路:ajax之前出現 ajax響應后消失
4.模板引擎的數據可以是ajax響應返回的,也可以是自己寫的
5.模板引擎的數據并不是全部都是替換操作html() , 也有可能是append()添加操作。取決于需求
6.非空判斷與文本清空
非空判斷:ajax發送之前
文本清空:ajax發送之后
7.文件預覽(固定方式)
8.文件上傳(固定方式)
9.頁面間傳值
sessionStorage :適合傳多個數據
window.location.href:適合傳少量數據
)
