JS表單傳值和URL編碼轉(zhuǎn)換
注意:
這里寫了兩個(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ù)組中,類似PHP的in_array函數(shù),需要的朋友可以參考下2014-08-08
JavaScript創(chuàng)建對(duì)象的四種常用模式實(shí)例分析
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象的四種常用模式,結(jié)合實(shí)例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動(dòng)態(tài)原型模式創(chuàng)建對(duì)象的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01
JavaScript實(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)查詢天氣小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)查詢天氣的小應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
Javascript絕句欣賞 一些經(jīng)典的js代碼
Javascript絕句欣賞 一些經(jīng)典的js代碼整理,學(xué)習(xí)js的朋友可以參考下2012-02-02
js控制滾動(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

