您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)jsonp跨域如何獲取百度聯(lián)想詞的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
jsonp原理:
1.Web頁面上用<script> 引入 js文件時(shí)則不受是否跨域的影響 (不僅如此,我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力,比如<script>、<img>、<iframe>)
2.于是我們把數(shù)據(jù)放到服務(wù)器上,并且數(shù)據(jù)為json形式(因?yàn)閖s可以輕松處理json數(shù)據(jù))
3.因?yàn)槲覀儫o法監(jiān)控通過<script>的src屬性是否把數(shù)據(jù)獲取完成,所以我們需要做一個(gè)處理。
4.實(shí)現(xiàn)定義好處理跨域獲取數(shù)據(jù)的函數(shù),如 function doJson(data){}。
5.用src獲取數(shù)據(jù)的時(shí)候添加一個(gè)參數(shù)cb=‘doJson' (服務(wù)端會(huì)根據(jù)參數(shù)cb的值返回對應(yīng)的內(nèi)容) 此內(nèi)容為以cb對應(yīng)的值,doJson為函數(shù)真實(shí)要傳遞的數(shù)據(jù)為函數(shù)的參數(shù)的一串字符如 doJson('數(shù)據(jù)')
百度聯(lián)想詞的實(shí)現(xiàn):
用jsonp解決跨域問題。我們就跨域拿到百度的數(shù)據(jù)
<script> //輸入框 var oInp = document.getElementsByTagName('input')[0]; //得到的數(shù)據(jù)存在ul的li里 var oUl = document.getElementsByTagName('ul')[0]; //獲取輸入內(nèi)容,查找百度對應(yīng)的src oInp.oninput = function () { var value = this.value; var oScript = document.createElement('script'); oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=doJosn'; document.body.appendChild(oScript); } //對傳回的數(shù)據(jù)進(jìn)行處理(回調(diào)函數(shù)) function doJosn(data) { var s = data.s; var str = ''; if (s.length > 0) { s.forEach(function (ele, index) { str += '<li><a href =https://sp0.baidu.com/s?wd=' + ele + '>' + ele + '</a></li>'; }) oUl.innerHTML = str; oUl.style.display = 'block'; } else { oUl.style.display = 'none'; } } </script>
感謝各位的閱讀!關(guān)于“jsonp跨域如何獲取百度聯(lián)想詞”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。