• <dd id="irhdl"><noscript id="irhdl"></noscript></dd>
  • <progress id="irhdl"></progress>
  • 武漢網站建設
    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了:【http://www.flybet.cn/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:

    網站建設 建網站 網站開發
    熱門城市網站建設
    沙市網站建設 襄城網站建設 漢陽網站建設 利川網站建設 遠安網站建設 老河口網站建設 團風網站建設 黃石港網站建設 羅田網站建設 建始網站建設 南漳網站建設 丹江口網站建設 棗陽網站建設 曾都網站建設 東西湖網站建設 赤壁網站建設 樊城網站建設 ??稻W站建設 通山網站建設 江漢網站建設 鄖西網站建設 石首網站建設 孝南網站建設 谷城網站建設 長陽網站建設 夷陵網站建設 紅安網站建設 洪湖網站建設 隨縣網站建設 硚口網站建設 南沙網站建設 番禺網站建設 濠江網站建設 曲江網站建設 南海網站建設 蘿崗網站建設 福田網站建設 金平網站建設 南澳網站建設 光明新網站建設 順德網站建設 禪城網站建設 越秀網站建設 澄海網站建設 白云網站建設 天河網站建設 花都網站建設 龍湖網站建設 羅湖網站建設 潮陽網站建設 龍華新網站建設 高明網站建設 香洲網站建設 斗門網站建設 翁源網站建設 樂昌網站建設 新豐網站建設 從化網站建設 荔灣網站建設 武江網站建設 醴陵網站建設 新化網站建設 江華網站建設 衡陽網站建設 岳陽網站建設 炎陵網站建設 攸縣網站建設 寧鄉網站建設 南縣網站建設 津市網站建設 溆浦網站建設 蘇仙網站建設 藍山網站建設 安仁網站建設 衡山網站建設 湘鄉網站建設 城步網站建設 大祥網站建設 鶴城網站建設 望城網站建設 澧縣網站建設 漣源網站建設 永定網站建設 瀘溪網站建設 沅江網站建設 茶陵網站建設 韶山網站建設 赫山網站建設 武岡網站建設 古丈網站建設
    首頁 | 網站建設 | 微信開發 | H5制作 | 網絡營銷 | 案例展示 | 新聞中心 | 文字版官網| 米拓模版標簽在線手冊
    136-2726-6633 / 027-82756-772

    地址:武漢市解放大道1328號中原大廈1806室

    E-mail:wuhan1806@163.com;QQ:6686935

    本網站所刊載信息,不代表盈科互動觀點,部分信息及數據來源于互聯網,如果侵犯您的權益,請速與我們聯系。
    Copyright ? 2006- 盈科動力(vikasp.net) 版權所有-鄂ICP備13002765號-1技術支持:武漢網站建設

    在線
    客服

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

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

    電話
    咨詢

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

    136-2726-6633
    項目經理手機

    微信
    咨詢

    加微信獲取報價
    頂部