回顧
1. jq概述
是一款基於js的輕量級框架
2. jq基礎語法
html中引入jq
jq與js的不同
js——》jq
$(js對象)
jq--》js
jq對象[索引]
頁面加載事件
js：只能定義一次
jq：可以定義多次
3. jq選擇器
基本：標籤、class、id
層級：後代、並集、父子
屬性：input[屬性名="屬性值"][]
過濾選擇器：
:first
:last
:even
:odd
:eq(index)
jq遍歷
jq對象.each(function(index,element){})
4. jq的dom操作
操作內容：text()、html()
操作屬性：attr()、val()、prop()
操作樣式：
1）jq對象.css();
2）jq對象.addClass() | jq對象.removeClass()
操作元素（標籤）
$(標籤)
jq對象.prepend(孩子)
jq對象.append(孩子)
jq對象.empty()
jq對象.remove()
5. jq事件
jq對象.click(function(){})
6. 綜合案例
JSON&AJAX
今日目標
1. json【今天掌握】
2. ajax【web、項目一、項目二】
一 JSON【今天掌握】
1.1 JSON概述
JavaScript對象表示形式（JavaScript Object Notation）
* java對象表示形式
User user = new User();
user.setUsername("后羿");
user.setAge(23);
user.setSex("男");
...
Product product = new Product();
product.setName("小米10");
product.setDesc("1億像素的手機小王子");
* javaScript對象表示形式
let user ={"username":"后羿","age":23,"sex":"男"}
let product = {"name":"小米10","desc":"1億像素的手機小王子"}
這哥們可以取代XML笨重的數據結構，和xml相比：更小、更快，更易解析
json、xml作用：作爲數據的載體，在網絡中傳輸
1.2 JSON基礎語法
* 對象類型
{name:value,name:value}
* 數組類型
[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]
* 複雜對象
{
name:value,
list:[{name:value},{},{}]
user:{name:value}
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-JSON基礎語法</title>
</head>
<body>
</body>
<script>
// 1.描述用戶對象（張三丰、男、32歲）
let user = {"username":"張三丰","sex":"男","age":103};
// alert(user)
// alert(user.username +" " +user.age);
// 2.描述用戶數組（張三丰、張翠山、張無忌）
let array = [
{"username":"張三丰","sex":"男","age":103},
{"username":"張翠山","sex":"男","age":32},
{"username":"張無忌","sex":"男","age":12}
];
/* for (let obj of array) {
console.log(obj.username +" "+obj.sex);
}*/
// 3.描述韋小寶（27歲，老婆、師傅）
let weiXiaoBao = {
"age":18,
"list":[
{"name":"雙兒","address":"揚州"},
{"name":"皇后","address":"島國"}
],
"shifu":{"name":"陳浩南"}
};
console.log(weiXiaoBao);
console.log(weiXiaoBao.age); // 年齡
let laopos = weiXiaoBao.list; // list集合
for (let laopo of laopos) {
console.log(laopo.name +" "+laopo.address);
}
let shifu = weiXiaoBao.shifu; // 師傅對象
console.log(shifu.name);
</script>
</html>
1.3 JSON格式轉換
* JSON對象與字符串轉換的相關函數
語法：
1. JSON.stringify(object) 把json對象轉爲字符串
2. JSON.parse(string) 把字符串轉爲json對象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-JSON格式轉換</title>
</head>
<body>
<script>
let userStr = '{"username":"張三丰","sex":"男","age":103}';
// alert(userStr);
// alert(userStr.username) 報錯
//2. JSON.parse(string) 把字符串轉爲json對象
let user = JSON.parse(userStr);
// alert(user.username)
//1. JSON.stringify(object) 把json對象轉爲字符串
let str = JSON.stringify(user);
alert(str);
</script>
</body>
</html>
二 AJAX【慢慢理解】
2.1 AJAX概述
傳統網站中存在的問題
- 網速慢的情況下，頁面加載時間長，用戶只能等待
- 表單提交後，如果一項內容不合格，需要重新填寫所有表單內容
- 頁面跳轉，重新加載頁面，造成資源浪費，增加用戶等待時間
AJAX可以解決以上問題
ajax這哥們是瀏覽器提供的一套方法，在無需重新加載整個網頁情況下，能夠更新部分網頁的技術，從而提高用戶瀏覽網站應用的體驗。
中文音譯：阿賈克斯
應用場景
- 搜索框提示
- 表單數據驗證
- 無刷新分頁
2.3 JS原生AJAX【開發中絕對不用…】
1）運行一個java的服務器
2）測試一下服務器
http://localhost:8080/check?username=123
3）案例需求
4）代碼實現【瞭解】
1. 創建ajax對象
let xhr = new XMLHttpRequest();
2. 告訴ajax請求方式和請求地址
xhr.open(請求方式，請求地址);
3. 發送請求
xhr.send();
4. 獲取服務器返回的數據
xhr.οnlοad=function(){
xhr.responseText;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-js的原生ajax</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="請輸入用戶名"> <span id="userwarn"></span>
<script>
document.getElementById('username').onblur=function () {
console.log(this.value);
// 1.創建ajax對象
let xhr = new XMLHttpRequest();
// 2.告訴ajax請求方式和請求地址
xhr.open('get','http://localhost:8080/check?username='+this.value)
// 3.發送請求
xhr.send();
// 4.獲取服務器返回數據
xhr.onload=function () {
console.log(xhr.responseText);// 返回的字符串
document.getElementById('userwarn').innerText=xhr.responseText;
}
}
</script>
</body>
</html>
2.4 JQuery的Ajax插件【會用】
2.4.1 ajax函數
* 語法：
$.ajax({name:value,name:value})
* 參數：
url:請求地址
type：請求方式 （get：大小有限制、post：大小沒有限制）
data：請求參數
success：請求成功時，執行的回調函數
-------
error：請求失敗時，執行的回調函數
dataType：預期服務器返回的數據類型：text、json
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-jq的ajax函數</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="請輸入用戶名"><span id="userwarn"></span>
<script>
// 給文本框綁定失去焦點事件
$('#username').blur(function () {
// 使用ajax函數發送請求
$.ajax({
url:"http://localhost:8080/check",
type:"post",
data:"username="+$(this).val(),
success:function (resp) {
// 實現局部刷新
$('#userwarn').text(resp);
},
error:function () {
alert('服務器繁忙，請稍後重試...')
},
// dataType:"json" // 相當於把 json字符串 轉爲了json對象
})
})
</script>
</body>
</html>
2.4.2 get函數
* 語法：
$.get(url,success);
* 參數：
url:請求地址
success：請求成功時的回調函數
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-jq的get函數</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="請輸入用戶名"><span id="userwarn"></span>
<script>
// 給文本框綁定失去焦點事件
$('#username').blur(function () {
// 使用get函數發送
let url = 'http://localhost:8080/check?username='+$(this).val();
$.get(url,function (resp) {
// 局部刷新
$('#userwarn').text(resp);
});
})
</script>
</body>
</html>
2.4.3 post函數
* 語法：
$.post(url,data,success);
* 參數：
url：請求地址
data：請求參數
success：請求成功時的回調函數
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-jq的post函數</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="請輸入用戶名"><span id="userwarn"></span>
<script>
// 給文本框綁定失去焦點事件
$('#username').blur(function () {
// 使用post函數發送請求
let url='http://localhost:8080/check';
let data='username='+$(this).val();
$.post(url,data,function (resp) {
// 局部刷新
$('#userwarn').text(resp);
})
})
</script>
</body>
</html>
2.5 同步和異步概述
使用ajax發送的是異步請求
同步和異步請求指的是，客戶端和服務器交互的行爲
同步：客戶端發送請求後，必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。
異步：客戶端發送請求後，不需要等待服務器端的響應。在服務器處理的過程中，客戶端可以進行其他的操作。
感知同步和異步區別
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-同步和異步</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">發送ajax</button>
<script>
// 給按鈕綁定點擊事件
$('#btn').click(function () {
// 使用ajax函數發送請求，ajax默認的是異步提交，可以改爲同步（瞭解）
$.ajax({
url:'http://localhost:8080/sleep',
type:'get',
success:function (resp) {
alert(resp)
},
async:false// 同步提交
})
})
</script>
</body>
</html>
ajax：異步提交和頁面局部刷新的技術
三 搜索案例
需求分析
服務器測試地址
http://localhost:8080/search?keyword=j
代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>傳智搜索</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style type="text/css">
.content {
width: 643px;
margin: 200px auto;
text-align: center;
}
input[type='text'] {
width: 530px;
height: 40px;
font-size: 14px;
}
input[type='button'] {
width: 100px;
height: 46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}
.show {
position: absolute;
width: 535px;
height: 100px;
border: 1px solid #999;
border-top: 0;
}
</style>
</head>
<body>
<div class="content">
<img alt="" src="../img/logo.png"><br/><br/>
<input type="text" id="search" name="keyword">
<input type="button" value="搜索一下">
<div class="show" style="display: none"></div>
</div>
<script>
// 1.搜索框綁定鍵盤彈起事件
$('#search').keyup(function () {
// 顯示div
$('.show').show();
// 2.獲取用戶輸入的值
console.log($(this).val());
// 判斷用戶輸入的值，小坑 js提供trim()方法
if (this.value.trim().length == 0) {
return;// 攔截代碼，不在向下執行
}
// 3.使用post函數發送請求
let url='http://localhost:8080/search';
let data = 'keyword='+$(this).val();
$.post(url,data,function (resp) {
// 清空上次搜索的內容
$('.show').empty();
// 4.局部更新
console.log(resp);
for (let ele of resp) {
$('.show').append(`<div style="cursor: pointer; text-align: left;padding-left: 5px" οnmοuseοver="gaoliang(this)" οnmοuseοut="huifu(this)" οnclick="set(this)">${ele}</div>`)
}
})
})
// 高亮
function gaoliang(obj) {
$(obj).css('background-color','#f0f0f0');
}
// 恢復
function huifu(obj) {
$(obj).css('background-color','white');
}
// 設置選中的值
function set(obj) {
// alert($(obj).text())
$('#search').val($(obj).text());
// 隱藏div
// $('.show').css('display','none');
$('.show').hide();
}
</script>
</body>
</html>