<td id="ycaca"><option id="ycaca"></option></td>
  • <li id="ycaca"><option id="ycaca"></option></li>
    武漢網站建設
    NEWS
    新聞觀點

    ajax跨域實現百度搜索提示功能

    作者:網站開發武漢 | 瀏覽量: | 更新時間:2021-07-08 | 當前欄目:武漢網站建設
           總所周知,為了提提高用戶體驗度,百度搜索引擎在用戶通過輸入框進行關鍵詞搜索的時候,會根據用戶輸入的關鍵詞來匹配出常用的關鍵詞出來以供用戶選擇,比如搜索建站公司這個詞的時候,會有這樣的效果:
    百度搜索建站公司提示效果

           這就是百度搜索提示的功能,看上去是一個小功能,實際上涵蓋的東西還是挺多的;其中實現的原理:就是用戶通過-輸入關鍵詞-這樣一個鍵盤事件來觸發ajax請求,通過ajxa發送到百度數據庫中,返回出用戶常用相匹配的關鍵詞給前臺瀏覽器,呈現出在頁面不刷新的情況下;給用戶一種比較好的搜索體驗度;我們都知道ajxa最大的好處就是可以在不刷新頁面的情況下就可以直接獲取數據,這種體驗是非常友好的,某種程度上給我們省了很多麻煩。那么,上面的這個功能怎么實現呢,下面,建站公司小編就帶大家來實現。

    首先,我們需要了解ajxa的一個基本使用方法:如圖:

    ajax基本使用方法

           使用ajax的時候,需要幾個基本的參數:type:服務器請求方式;默認情況下為get;url:需要發送數據請求的網址;dataType:服務器返回的數據格式;data:發送請求需要傳遞的數據;success()方法:請求成功的處理函數;error()函數:請求失敗的處理函數;如果要實現百度搜索提示的功能,因為url沒有現成的內容,并且隨著時間的變化,這個URL還不一定一直是不變的(僅僅是筆者的猜測);所以URL是自己通過瀏覽器分析得到一些線索:

    ajxa數據請求url
    ajxa數據請求分析

           通過搜索不同的關鍵詞,我們可以發現,百度搜索引擎在鼠標按下的瞬間就會觸發ajax請求,并且請求的url有些地方是相同的,有些則是不同的,從圖中我們可以分析下參數:ie:返回結果數據編碼;from:瀏覽器類型(pc端/手機端);wd:輸入的關鍵詞;cb:處理返回結果集的函數名對應的參數名;JQuery.....那一串則是處理返回結果集的函數名;并且這個函數名是有ajxa系統自動生成的;為什么需要這么處理呢?在ajax跨域處理的時候,就會使用js動態創建script標簽,通過引入外部js數據處理文件來實現跨域的問題;這樣一想,百度官方也是同意外部人員來使用這個接口的吧。其它的參數,因為不明白什么就不一一解釋了,但是,通過搜索不同的關鍵詞發現,這些參數基本都是一樣的;因為通過上面的分析我們就可以得到這個url了:【https://www.baidu.com/sugrec?ie=utf-8&prod=pc&wd=武漢做網站&yy=xxx】;有了url,我們就可以開始實現了,對于跨域問題,大家就自行百度搜索一下吧。下面就直接上代碼了;同時,代碼中還設計到了騰訊開發的:artTemplae;有興趣的朋友可以網上了解一下;

    HTML部分:

    HTML部分


    HTML部分比較簡單,一個輸入框,一個顯示結果的div。


    css部分:

    css部分


    css也比較簡單,讓頁面看起來比較舒服些。


    JS部分:

    js部分


    JS部分包括了事件處理,數據處理,模版定義和內容的渲染;通過鍵盤keyup事件來獲取輸入的關鍵詞,然后通過發送ajxa請求來獲取數據;再通過template綁定好數據到定義好的模版里,最后渲染數據到顯示結果的div里。

    效果展示:

    效果展示


    最后測試了一下;通過搜索建站公司這個關鍵詞得到了效果圖,和在百度里搜索的截圖是一致,ajax跨域實現百度搜索提示的功能就算完成了。

    溫馨提示:

    1、凡本網注明“來源:***(非盈科互動)”的作品,均轉載自其它媒體,轉載目的在于傳遞更多的信息,并不代表本網贊同其觀點和對其真實性負責。

    2、如因作品內容、版權和其它問題需要同本網聯系的,請在30日內進行。

    征稿啟事:

    為了更好的發揮盈科互動新聞資訊平臺價值,促進諸位自身發展以及業務拓展,更好地為企業及個人提供服務,盈科互動誠征各類稿件,歡迎實力來稿。

    文章TAG:

    網站開發 網站建設 建網站
    熱門城市網站建設
    湖北網站建設 武漢網站建設 黃石網站建設 十堰網站建設 宜昌網站建設 襄樊網站建設 鄂州網站建設 荊門網站建設 孝感網站建設 荊州網站建設 黃岡網站建設 咸寧網站建設 隨州網站建設 廣水網站建設 恩施網站建設 仙桃網站建設 潛江網站建設 天門網站建設 北京網站建設 東城網站建設 西城網站建設 崇文網站建設 宣武網站建設 朝陽網站建設 豐臺網站建設 石景山網站建設 海淀網站建設 門頭溝網站建設 房山網站建設 通州網站建設 順義網站建設 昌平網站建設 大興網站建設 懷柔網站建設 平谷網站建設 密云網站建設 延慶網站建設 上海網站建設 黃浦網站建設 盧灣網站建設 徐匯網站建設 長寧網站建設 靜安網站建設 普陀網站建設 閘北網站建設 虹口網站建設 楊浦網站建設 閔行網站建設 寶山網站建設 嘉定網站建設 浦東新網站建設 金山網站建設 松江網站建設 青浦網站建設 南匯網站建設 奉賢網站建設 崇明網站建設 廣東網站建設 廣州網站建設 韶關網站建設 深圳網站建設 珠海網站建設 汕頭網站建設 佛山網站建設 江門網站建設 湛江網站建設 茂名網站建設 肇慶網站建設 惠州網站建設 梅州網站建設 汕尾網站建設 河源網站建設 陽江網站建設 清遠網站建設 東莞網站建設 中山網站建設 潮州網站建設 揭陽網站建設 云浮網站建設 湖南網站建設 長沙網站建設 株洲網站建設 湘潭網站建設 衡陽網站建設 邵陽網站建設 岳陽網站建設 常德網站建設 張家界網站建設 益陽網站建設 郴州網站建設 永州網站建設 懷化網站建設 婁底網站建設 湘西網站建設 安徽網站建設 合肥網站建設 亳州網站建設 蕪湖網站建設 馬鞍山網站建設 池州網站建設 黃山網站建設 滁州網站建設 安慶網站建設 淮南網站建設 淮北網站建設 蚌埠網站建設 宿州網站建設 宣城網站建設 六安網站建設 阜陽網站建設 銅陵網站建設 明光網站建設 天長網站建設 寧國網站建設 界首網站建設 桐城網站建設 潛山網站建設
    本網站所刊載信息,不代表盈科互動觀點,部分信息及數據來源于互聯網,如果侵犯您的權益,請速與我們聯系。
    Copyright ? 2006- 盈科動力(vikasp.net) 版權所有-鄂ICP備13002765號-1技術支持:武漢網站建設

    在線
    客服

    技術在線服務時間:9:00-20:00

    在盈科,您對接的直接是技術員,而非客服傳話!

    電話
    咨詢

    027-8275-6772
    7*24小時客服熱線

    136-2726-6633
    項目經理手機

    微信
    咨詢

    加微信獲取報價
    頂部
    亚洲一区国产精品_亚洲欧洲免费无码_日韩国产高清一区二区_国产精品久久精品国产
    <td id="ycaca"><option id="ycaca"></option></td>
  • <li id="ycaca"><option id="ycaca"></option></li>