【網(wǎng)頁制作-jquery, php】"key-value" 網(wǎng)頁書簽(php與js之間的數(shù)據(jù)傳遞)

為網(wǎng)站首頁添加一個(gè)“key-value”傳送門功能

所謂key value,就比如輸入“msds”,然后點(diǎn)擊“沖鴨”按鈕,就可以跳轉(zhuǎn)到對應(yīng)的頁面:http://www.bossqiao.com/program_info/ds_info.php

msds是key,value是對應(yīng)的網(wǎng)址

image.png

可以跳轉(zhuǎn)到任意網(wǎng)址,不限于自己的網(wǎng)站,比如輸入“貓”,跳轉(zhuǎn)到b站上的“巖合光昭的貓步走世界”:https://www.bilibili.com/video/av1297817/

該功能的適用范圍?

相當(dāng)于一個(gè)瀏覽器書簽功能,當(dāng)收藏的網(wǎng)頁多了之后,找起來很不方便。而且很多網(wǎng)頁可能很久才瀏覽一次,都添加到書簽里會(huì)顯得臃腫,這時(shí)候如果記住關(guān)鍵字,就能比較方便的訪問。

具體實(shí)現(xiàn):

把key-value存儲(chǔ)到go_menu.txt文件中:

image.png

index.php文件中讀取go_menu.txt,將key-value存儲(chǔ)到數(shù)組$go_menu中

這里使用的是associate數(shù)組,方便用key-value讀取數(shù)據(jù)

image.png

對應(yīng)的html以及js代碼

image.png

下面這行代碼實(shí)現(xiàn)php數(shù)組轉(zhuǎn)js變量(對象)

var link_list = <?php echo json_encode($go_menu)?>;

訪問網(wǎng)頁時(shí),先運(yùn)行服務(wù)器端的php代碼,然后再運(yùn)行客戶端的js代碼

【2019-02-10更新】

添加按下回車鍵事件

image.png

【2019-02-18更新】

添加多個(gè)關(guān)鍵詞用"/"分隔的功能
image.png

實(shí)際演示可以訪問蟹老板的主頁:http://www.bossqiao.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容