JS表單傳值和URL編碼轉(zhuǎn)換

2024-05-06 16:42:48

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

注意：

這里寫了兩個(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)行后：

JS,表單傳值,URL,編碼轉(zhuǎn)換