ajax之仿百度智慧搜尋
阿新 • • 發佈：2018-12-21
在使用搜索引擎時，我們常常在輸入框輸入時下方出現相關推薦詞，這是通過ajax非同步請求實現的。 實現思路：通過得到輸入輸入框的值，然後使用百度的智慧搜尋介面傳送ajax請求，得到返回的資料，並使用列表展現 關鍵知識：ajax,jsonp,keyup事件
具體程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>仿百度智慧搜尋</title> <style> * { margin: 0; padding: 0; } ul{ list-style: none; } .con { width: 230px; margin: 100px auto; } .box{ width: 230px; background: #1ce90e; padding: 10px; } #list ul{ width: 248px; border: 1px solid #ccc; } #list li { padding: 5px 10px; } </style> </head> <body> <div class="con"> <div id="box" class="box"> <input type="text" name="search" id="txt"> <input type="button" name="btn" value="search"> </div> <div id="list"></div> </div> </body> <script src="jquery-1.11.2.js"> </script> <script> //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= $(function() { $("#txt").keyup(function() { console.log($("#txt")); var txt = $("#txt").val(); //得到搜尋框的值 console.log(txt); var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + txt; search(url); }); }); function search(url) { document.getElementById('list').innerHTML = ''; $.ajax({ type: 'get', async: true, url: url, dataType: 'jsonp', jsonp: 'cb', //傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名（預設為：callback) // jsonpCallback: 'callback', //自定義的jsonp回撥函式名稱,預設為JQuery自動生成的隨機函式名，如：jQuery110208321269858078724_1542071577078(['aaa','bbb']); success: function(data) { console.log(data); var ul = $("<ul></ul>"); $.each(data.s, function(i, elem) { var ele = $("<li></li>").append(elem); $(ul).append(ele); }); $("#list").append(ul); }, error: function() { console.log('fail'); } }) } </script> </html>