我們經(jīng)常在搜索框輸入文字時(shí)，不需要點(diǎn)擊搜索，下面就可以實(shí)時(shí)顯示搜索到的相關(guān)信息。之前覺(jué)得這個(gè)功能提高了很大效率很炫酷，接觸了前端發(fā)現(xiàn)原來(lái)實(shí)現(xiàn)也很簡(jiǎn)單。
jsonp的東西我自己是講不清的畢竟是個(gè)了解。通常用 Ajax 在不刷新頁(yè)面的情況下刷新局部頁(yè)面，但是 Ajax 只能請(qǐng)求跟網(wǎng)頁(yè)同一個(gè)服務(wù)器里的資源，所以要用到可以跨域請(qǐng)求的 jsonp，簡(jiǎn)而言之就是可以在某一網(wǎng)頁(yè)中隨意請(qǐng)求其他服務(wù)器里的資源，來(lái)局部更新當(dāng)前頁(yè)面。
1. 結(jié)果（非常簡(jiǎn)陋）：
示例
2. 簡(jiǎn)單步驟：
- 監(jiān)聽(tīng)輸入框輸入文字
- 利用
jsonp調(diào)用 360搜索 并獲得結(jié)果 -
jquery操作 DOM 顯示搜索結(jié)果
3. 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
// keyup 監(jiān)聽(tīng)輸入框
$('.input').keyup(function() {
var input = $(this).val();
$.ajax({
url: 'https://sug.so.#/suggest?encodein=utf-8&encodeout=utf-8',
type: 'GET', // 請(qǐng)求類(lèi)型
dataType: 'jsonp',
data: { word: input}
})
.done(function(data) {
response = data.s; // 獲取返回結(jié)果
$('.con').empty(); // 清空輸入框
// 把所有結(jié)果添加到列表
for (var i = 0; i < response.length; i++) {
var $li = $('<li>' + response[i] + '</li>');
$('.con').append($li);
}
})
.fail(function() {
alert('error');
});
});
});
</script>
</head>
<body>
<input type="text" class="input">
<ul class="con"></ul>
</body>
</html>
4. 說(shuō)明：
-
jquery把jsonp封裝在ajax中，兩者其實(shí)毫無(wú)關(guān)系，只是用起來(lái)更方便更舒服 - 傳遞的 url 可以自己在瀏覽器控制臺(tái)獲取，同理可以獲取其他瀏覽器的
url 做個(gè)不同版本的搜索 -
data以鍵值對(duì)的形式傳遞數(shù)據(jù)：鍵word是抓取360搜索時(shí)得到的 url ,是固定的；比如360搜索 ‘1’ 時(shí)得到 url ：https://sug.so.#/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=1，word=1就是傳遞過(guò)去的數(shù)據(jù)，另外要加上encodein=utf-8&encodeout=utf-8，不然 jsonp 輸入中文時(shí)返回結(jié)果會(huì)是亂碼 -
.done方法在成功獲得數(shù)據(jù)時(shí)執(zhí)行，.fail方法在產(chǎn)生錯(cuò)誤時(shí)執(zhí)行 -
.done方法里獲取data.s才可以得到想要的搜索結(jié)果，是因?yàn)榉?wù)器返回的完整數(shù)據(jù)是這樣的 (比如搜索 ‘1’)
jQuery172023165242407540276_1514127784930({q:"1",p:true,s:["163",
"1688阿里巴巴批發(fā)網(wǎng)","1688",
"163郵箱登錄","1688阿里巴巴","12306網(wǎng)上訂票官網(wǎng)",
"12306","126","126郵箱登錄","139郵箱登錄"]});
總的來(lái)說(shuō)還是灰常簡(jiǎn)單滴~
Nicelle Beauchene
New York, United States
