精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
jq使用jsonp實現百度搜索

項目實現:還原百度搜索功能;

項目原理:利用json回調頁面傳參;

什么是jsonp就是利用<script>標簽的src地址,讓目標頁面回調本地頁面,并且帶入參數,也解決了跨域問題;

代碼如下:

html(css代碼不提供)

1 <div class="box">
2       <input type="text" />
3       <div class="ssk"></div>
4       <button>×</button>
5 </div>

js

 1 var script,ids;
 2       $(".box>input").on("input",inputHandler)
 3       function inputHandler(e){
 4         if (ids) return;
 5         ids = setTimeout(function () {//節流
 6           clearTimeout(ids);
 7           ids=0;
 8           if (script) { //刪除上一次創建script標簽
 9             script.remove();
10             script = null;
11           }
12           script=$("<script><\/script>").attr("src",`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= 
13                ${$(".box>input").val()}
            &json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback` 14 ).appendTo("body"); 15 // 點擊x按鈕刪除搜索框內容,并且隱藏button按鈕 16 $("button").click(function () { 17 $("input").val(""); 18 $("button").css("display", "none"); 19 }); 20 // 如果搜索框為空則把x按鈕隱藏 21 if ($("input").val().length === 0) { 22 $("button").css("display", "none"); 23 } else { 24 $("button").css("display", "block"); 25 } 26 27 }, 500); 28 } 29 function callback(data) { 30 if (data) { 31 $(".box>.ssk").css("display", "block"); 32 } 33 // 刪除上一次的搜索列表 34 if ($(".ssk").children().length !== 0) { 35 $("a").remove(); 36 } 37 // 遍歷數組內容輸出 38 $.each(data.s, function (index, item) { 39 $("<a>"+item+"</a>").appendTo(".box>.ssk"); 40 $("a").attr('href','https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&wd='+encodeURIComponent(item)); 41 }); 42 // 失去焦點隱藏搜索列表 43 $(".box>.ssk").on("mouseleave", function () { 44 $(".box>.ssk").css("display", "none"); 45 }); 46 }
  • 這里目標頁面是“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback” 向百度服務器請求
  • callback函數為目標服務器的回調函數,傳回來的參數data是一個對象;
  • callback回調函數中,傳回來的data中s屬性是搜索到的內容,遍歷data.s數組,將每個元素的外層添加a標簽,a標簽的超鏈接為搜索到的內容,
  • 改變a標簽超鏈接的wd屬性就可以搜索到對應的內容;wd傳入的值需要進行編碼(encodeURIComponent)處理,服務器才能給出對應內容的超鏈接

日常百度搜索都有wd屬性,改變wd屬性即可得到搜索

 

 

 

最終效果:

 

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
手把手教你用JavaScript打造一個網頁搜索引擎
jsonp其實很簡單【ajax跨域請求】
說說JSON和JSONP,也許你會豁然開朗
JS學習35:js使用JSONP、VAR實現前端跨域
淺談跨域以WebService對跨域的支持
jsonp 進行 Javascript 的跨域數據訪問
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 寿阳县| 新宾| 民县| 襄汾县| 独山县| 公安县| 新源县| 新建县| 永靖县| 太谷县| 霸州市| 闸北区| 新蔡县| 和政县| 凤冈县| 麦盖提县| 星子县| 和平县| 雷波县| 合水县| 汾西县| 通河县| 宁德市| 九江县| 娄烦县| 灵寿县| 全州县| 修水县| 武穴市| 广灵县| 辛集市| 澄城县| 盐城市| 舒兰市| 泾川县| 如皋市| 西平县| 松潘县| 韶关市| 平舆县| 定边县|