JS表單傳值和URL編碼轉(zhuǎn)換
注意:
這里寫(xiě)了兩個(gè)網(wǎng)頁(yè)
因?yàn)閁RL傳過(guò)去的數(shù)據(jù)不支持中文字符和一些特殊符號(hào) 所以需要轉(zhuǎn)換一下編碼
實(shí)現(xiàn)效果:網(wǎng)頁(yè)1的表單數(shù)據(jù)傳到網(wǎng)頁(yè)2并顯示出來(lái)
網(wǎng)頁(yè)1代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>document</title> </head> <body> <!--test_form.html為需要發(fā)送數(shù)據(jù)到的網(wǎng)頁(yè),https://idaobin.com/test/test_form.html --> <!--表單數(shù)據(jù)將通過(guò)method屬性附加到 URL上--> <!--submit表單提交到另一個(gè)網(wǎng)頁(yè)--> <form action="test_form.html" method="GET" target="_blank"> 賬號(hào):<input type="text" name="code"><br> 姓名:<input type="text" name="str"><br> <input type="submit"> </form> </body> </html>
網(wǎng)頁(yè)2代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> <!--URL編碼轉(zhuǎn)換,只對(duì)第二個(gè)輸入框轉(zhuǎn)換--> <script> window.onload=function(){ var a=document.getElementById("str").innerText; var b=(decodeURIComponent(a)); document.getElementById("str").innerText=b; } // 以下是jquery代碼 // $(function(){ // var c=$("#str").text(); // var d=(decodeURIComponent(c)); // $("#str").text(d); // }); </script> </head> <body> <p>提交過(guò)來(lái)的數(shù)據(jù)頁(yè)面</p> 賬號(hào):<span id="code"></span><br> 姓名:<span id="str"></span> </body> <!--獲取表單傳過(guò)來(lái)的數(shù)據(jù)--> <script> function UrlSearch(){ var name,value; var str=location.href; var num=str.indexOf("?"); str=str.substr(num+1); var arr=str.split("&"); for(var i=0;i<arr.length;i++){ num=arr[i].indexOf("="); if(num>0){ name=arr[i].substring(0,num); value=arr[i].substr(num+1); this[name]=value; } } } var Request=new UrlSearch(); document.getElementById("code").innerHTML=Request.code; document.getElementById("str").innerHTML=Request.str; </script> </html>
運(yùn)行后:
本文轉(zhuǎn)載于:https://www.idaobin.com/archives/276.html
- js利用與或運(yùn)算符優(yōu)先級(jí)實(shí)現(xiàn)if else條件判斷表達(dá)式
- 淺談JS運(yùn)算符&&和|| 及其優(yōu)先級(jí)
- 淺談JavaScript中運(yùn)算符的優(yōu)先級(jí)
- javascript URL編碼和解碼使用說(shuō)明
- Javascript中的幾種URL編碼方法比較
- JavaScript中URL編碼函數(shù)代碼
- JavaScript字符串String和Array操作的有趣方法
- Javascript String 字符串操作包
- js Math 對(duì)象的方法
- js中常用的Math方法總結(jié)
- js中arguments的用法(實(shí)例講解)
- JS前端知識(shí)點(diǎn) 運(yùn)算符優(yōu)先級(jí),URL編碼與解碼,String,Math,arguments操作整理總結(jié)
相關(guān)文章
JavaScript實(shí)現(xiàn)的in_array函數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的in_array函數(shù),用于判斷一個(gè)值是否在數(shù)組中,類(lèi)似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08JavaScript創(chuàng)建對(duì)象的四種常用模式實(shí)例分析
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的四種常用模式,結(jié)合實(shí)例形式分析了javascript使用工廠(chǎng)模式、構(gòu)造函數(shù)模式、原型模式及動(dòng)態(tài)原型模式創(chuàng)建對(duì)象的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加,刪除行的方法實(shí)例詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加,刪除行的方法,較為詳細(xì)的分析了javascript操作table表格實(shí)現(xiàn)針對(duì)表格元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單
這篇文章主要介紹了基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單的相關(guān)資料,感興趣的朋友可以參考一下2016-05-05原生js實(shí)現(xiàn)查詢(xún)天氣小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)查詢(xún)天氣的小應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Javascript絕句欣賞 一些經(jīng)典的js代碼
Javascript絕句欣賞 一些經(jīng)典的js代碼整理,學(xué)習(xí)js的朋友可以參考下2012-02-02js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法,通過(guò)JavaScript可以直接控制滾動(dòng)條的位置,從而達(dá)到鎖定滾動(dòng)條的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07