jQuery使用jsonp實現百度搜索的示例代碼_jquery

來源:腳本之家  責任編輯:小易  

jquery file upload如何使用jsonp數據類型在這篇文章中,我將解釋執行跨域服務電話從客戶端瀏覽器和工作需要做它使用jQuery的JSONP調用的障礙。我會還提供了一個一步一步實現的例子JSONP調用。NET 4.0中的WCF服務?缬蛘{用限制跨域服務的限制是由于安全策略被命名為同源策略。它定義了到客戶端的腳本語言的編程語言,如實施的政策。這一政策將限制任何以下情況下調用。呼叫從客戶端的資源比實際的頁面服務協議,通過該協議通過不同的協議。呼叫從客戶機到不同的域/域/服務頁面的Web服務器的Web服務器比躺在資源。端口是不同的。同源策略基本上被定義為網絡安全的目的。同源策略的唯一的例外是腳本標記。腳本標記可以通過交叉域腳本調用的。JSONP消息格式JSONP消息格式基本上是一個正常的JSON格式填充。我將解釋什么填充是所有關于JSONP。正如我在上一節的同源策略的標簽豁免。所以跨域調用是可以做到的,如下圖所示。script>安全編碼的Boot Camp立即下載這跨域調用一定會成功的結果將返回一個JSON格式如下所示。{"OrderId":1000,"OrderItem":"Cricket Batwww.anxorj.tw防采集請勿采集本網。

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

從字面上看,你的json格式好像有點問題,嘗試把json復制下來,百度搜索:json格式化,然后粘貼進去驗證一下。

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

$.ajax({ type:\"get\", url:\"跨域的地址\", dataType:\"jsonp\", jsonp:\"jsonpCallback\", jsonpCallback:\"callbackMe\", success:function(json){ (\"#showcontent\").text(\"Result:\"+json.status);},

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

當然可以 dataType(String):預期服務器返回的數據類型。使用 JSONP 形式調用函數時,如\"myurl?callback=?jQuery 將自動替換?為正確的函數名,以執行回調函數。text\":返回純文本字符串

代碼如下:

后臺服務器響應的內容有區別的 用 json 的時候 response.write(\"{\\\"p1\\\":\\\"v1\\\"}\") 用 jsonp 的時候 response.write(request[\"callback\"]+\"({\\\"p1\\\":\\\"v1\\\"})\")

html(css代碼不提供)

把源碼扒出來

<div class="box"> <input type="text" /> <div class="ssk"></div> <button>×</button> </div>

js

var script,ids; $(".box>input").on("input",inputHandler) function inputHandler(e){ if (ids) return; ids = setTimeout(function () {//節流 clearTimeout(ids); ids=0; if (script) { //刪除上一次創建script標簽 script.remove(); script = null; } script=$("<script><\/script>").attr("src",`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=     ${$(".box>input").val()}            &json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback` ).appendTo("body"); // 點擊x按鈕刪除搜索框內容,并且隱藏button按鈕 $("button").click(function () { $("input").val(""); $("button").css("display", "none"); }); // 如果搜索框為空則把x按鈕隱藏 if ($("input").val().length === 0) { $("button").css("display", "none"); } else { $("button").css("display", "block"); } }, 500); } function callback(data) { if (data) { $(".box>.ssk").css("display", "block"); } // 刪除上一次的搜索列表 if ($(".ssk").children().length !== 0) { $("a").remove(); } // 遍歷數組內容輸出 $.each(data.s, function (index, item) { $("<a>"+item+"</a>").appendTo(".box>.ssk"); $("a").attr('href','https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&wd='+encodeURIComponent(item)); }); // 失去焦點隱藏搜索列表 $(".box>.ssk").on("mouseleave", function () { $(".box>.ssk").css("display", "none"); }); } 這里目標頁面是“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屬性即可得到搜索

最終效果:

以上就是jQuery使用jsonp實現百度搜索的示例代碼的詳細內容,更多關于jQuery實現百度搜索的資料請關注真格學網其它相關文章!

http://www.cnblogs.com/duanhuajian/p/3152617.html這里寫2113的很5261清楚4102了1653內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • 輕松搞定jquery+jsonp跨域請求的解決方案
  • 使用jquery的jsonp如何發起跨域請求及其原理詳解
  • 原生js jquery ajax請求以及jsonp的調用方法
  • 關于jquery.ajax()的jsonp碰上post詳解
  • jquery使用jsonp實現跨域獲取數據的三種方法詳解
  • jquery中jsonp的兩種實現方式詳解
  • 淺談jquery+ajax+jsonp 跨域訪問
  • 解決jquery使用jsonp時產生的錯誤
  • 用jquery與jsonp輕松解決跨域訪問的問題
  • jquery ajax jsonp跨域調用實例代碼
  • jquery操作radio,checkbox,select表單操作實現代碼
  • 用jquery中插件dialog實現彈框效果實例代碼
  • jquery實現的網頁左側在線客服效果代碼
  • jquery 導航條的效果(css選擇器控制)
  • 關于javascript和jquery的類型判斷詳解
  • 鼠標移到導航當前位置的li變色處于選中狀態
  • jquery操作復選框(checkbox)的12個小技巧總結
  • jquery讀取xml文件內容的方法
  • 詳解jquery設置內容和屬性
  • 基于jquery實現的ajax 驗證用戶名是否存在的實現代碼
  • jQuery如何實現jsonp調用的簡單實例
  • jquery file upload 使用jsonp數據類型怎么使用
  • 使用jquery的ajax的jsonp類型跨域請求數據、始終獲取不到返回數據呢
  • jquery里面ajax自動補全jsonp回調函數名如何實現的以及jq使用了
  • jquery使用jsonp方法總是報錯
  • 基于jQuery,jsonp已經Jersey的跨越問題?急。!
  • 請告訴我能不能用jquery jsonp獲取數據
  • 為什么jquery-jsonp總是執行error里的方法
  • 怎樣把jquery下的jsonp改寫成原生的javascript,就是說下面的代碼不用jquery該怎么實現?哪位大俠給指點
  • jQuery $.ajax中的jsonp該怎么用
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全yui.ext相關prototypejqueryangularjsjsonlib_jsjs面向對象extjsmootoolsseajsdojovue.jsbackbone.js其它首頁javascriptjavascript類庫輕松搞定jquery+jsonp跨域請求的解決方案使用jquery的jsonp如何發起跨域請求及其原理詳解原生js jquery ajax請求以及jsonp的調用方法關于jquery.ajax()的jsonp碰上post詳解jquery使用jsonp實現跨域獲取數據的三種方法詳解jquery中jsonp的兩種實現方式詳解淺談jquery+ajax+jsonp 跨域訪問解決jquery使用jsonp時產生的錯誤用jquery與jsonp輕松解決跨域訪問的問題jquery ajax jsonp跨域調用實例代碼jquery操作radio,checkbox,select表單操作實現代碼用jquery中插件dialog實現彈框效果實例代碼jquery實現的網頁左側在線客服效果代碼jquery 導航條的效果(css選擇器控制)關于javascript和jquery的類型判斷詳解鼠標移到導航當前位置的li變色處于選中狀態jquery操作復選框(checkbox)的12個小技巧總結jquery讀取xml文件內容的方法詳解jquery設置內容和屬性基于jquery實現的ajax 驗證用戶名是否存在的實現代碼jquery加載頁面的方法(頁面加載完jquery判斷checkbox是否選中的3種jquery獲取和修改img的src值的方jquery 綁定select標簽的onchangjquery獲取復選框被選中的值jquery $(document).ready() 與wjquery判斷radio(單選框)是否選jquery 將disabled的元素置為enajquery中獲取id值方法小結jquery判斷元素是否隱藏的多種方jquery實現拖動效果(代碼分享)幾種二級聯動案例(jquery\array\ajax phjquery中使用ajax傳輸超大數據的解決方法jquery ajax 用于計算點擊率(統計)詳解jquery簡單的表格應用jquery實現點擊按鈕文字變成input框點擊保jquery瀑布流插件wookmark使用實例jquery無刷新上傳之uploadify簡單代碼jquery左右滾動支持圖片放大縮略圖圖片輪基于jquery的列表拖動排序實現代碼
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载