JS表單傳值和URL編碼轉(zhuǎn)換
注意:
這里寫了兩個網(wǎng)頁
因為URL傳過去的數(shù)據(jù)不支持中文字符和一些特殊符號 所以需要轉(zhuǎn)換一下編碼
實現(xiàn)效果:網(wǎng)頁1的表單數(shù)據(jù)傳到網(wǎng)頁2并顯示出來
網(wǎng)頁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)頁,https://idaobin.com/test/test_form.html --> <!--表單數(shù)據(jù)將通過method屬性附加到 URL上--> <!--submit表單提交到另一個網(wǎng)頁--> <form action="test_form.html" method="GET" target="_blank"> 賬號:<input type="text" name="code"><br> 姓名:<input type="text" name="str"><br> <input type="submit"> </form> </body> </html>
網(wǎng)頁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)換,只對第二個輸入框轉(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>提交過來的數(shù)據(jù)頁面</p> 賬號:<span id="code"></span><br> 姓名:<span id="str"></span> </body> <!--獲取表單傳過來的數(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>
運行后:
本文轉(zhuǎn)載于:https://www.idaobin.com/archives/276.html
- js利用與或運算符優(yōu)先級實現(xiàn)if else條件判斷表達式
- 淺談JS運算符&&和|| 及其優(yōu)先級
- 淺談JavaScript中運算符的優(yōu)先級
- javascript URL編碼和解碼使用說明
- Javascript中的幾種URL編碼方法比較
- JavaScript中URL編碼函數(shù)代碼
- JavaScript字符串String和Array操作的有趣方法
- Javascript String 字符串操作包
- js Math 對象的方法
- js中常用的Math方法總結(jié)
- js中arguments的用法(實例講解)
- JS前端知識點 運算符優(yōu)先級,URL編碼與解碼,String,Math,arguments操作整理總結(jié)
相關(guān)文章
JavaScript實現(xiàn)的in_array函數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)的in_array函數(shù),用于判斷一個值是否在數(shù)組中,類似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08JavaScript創(chuàng)建對象的四種常用模式實例分析
這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結(jié)合實例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01JavaScript實現(xiàn)動態(tài)添加,刪除行的方法實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)添加,刪除行的方法,較為詳細的分析了javascript操作table表格實現(xiàn)針對表格元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07基于bootstrap插件實現(xiàn)autocomplete自動完成表單
這篇文章主要介紹了基于bootstrap插件實現(xiàn)autocomplete自動完成表單的相關(guān)資料,感興趣的朋友可以參考一下2016-05-05Javascript絕句欣賞 一些經(jīng)典的js代碼
Javascript絕句欣賞 一些經(jīng)典的js代碼整理,學習js的朋友可以參考下2012-02-02