在JS表單中如何實現傳值和URL編碼轉換？
這篇文章給大家詳細分享了JS表單傳值和URL編碼轉換的相關知識點，並把實例做了分享，一起學習下。
注意：
這裡寫了兩個網頁
因為URL傳過去的資料不支援中文字元和一些特殊符號所以需要轉換一下編碼
#實現效果：網頁1的表單資料傳到網頁2並顯示出來
網頁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为需要发送数据到的网页,https://idaobin.com/test/test_form.html --> <!--表单数据将通过method属性附加到 URL上--> <!--submit表单提交到另一个网页--> <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>
網頁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编码转换，只对第二个输入框转换-->
<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>提交过来的数据页面</p>
账号：<span id="code"></span><br>
姓名：<span id="str"></span>
</body>
<!--获取表单传过来的数据-->
<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>執行後：
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是在JS表單中如何實現傳值和URL編碼轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
全角英文字母轉換為半角形式的實用技巧
Mar 26, 2024 am 09:54 AM
全角英文字母轉換為半角形式的實用技巧在現代生活中，我們經常會接觸到英文字母，在使用電腦、手機等設備時也經常需要輸入英文字母。然而，有時候我們會遇到全角英文字母的情況，而我們需要使用的是半角形式。那麼，如何將全角英文字母轉換為半角形式呢？以下就為大家介紹一些實用的技巧。首先，全角英文字母和數字是指在輸入法中佔據一個全角位置的字符，而半角英文字母和數字則是佔據一
如何將AI檔案轉換為CDR格式
Feb 19, 2024 pm 04:09 PM
AI檔案指的是AdobeIllustrator（簡稱AI）軟體所建立的向量圖形文件，而CDR檔案指的是CorelDRAW軟體所建立的向量圖形檔。由於這兩個軟體屬於不同的廠商開發，因此它們的文件格式不同，無法直接相互轉換。然而，我們可以透過一些方法將AI檔案轉換為CDR檔案。以下將介紹一種常用的轉換方法。步驟一：匯出AI檔案為EPS格式AdobeIllust
如何在Windows 11/10中將ODT轉換為Word？
Feb 20, 2024 pm 12:21 PM
在這篇文章中，我們將向您展示如何將OpenDocumentTextDocument(ODT)檔案轉換為MicrosoftWord(Docx、DOC等)。格式。如何在Windows11/10中將ODT轉換為Word以下是您可以在WindowsPC上將ODT文件轉換為DOC或DOCX格式的方法：使用寫字板或Word將ODT轉換為Word我們要向您展示的第一種方法是使用寫字板或MicrosoftWord將ODT轉換為Word。以下是實現這一點的步驟：首先，使用「開始」功能表開啟寫字板應用程式。現在，轉到
如何將虛擬機器轉換為實體機器？
Feb 19, 2024 am 11:40 AM
將虛擬機器(VM)轉換為實體機器是一種將虛擬實例和關聯的應用軟體遷移到實體硬體平台的過程。這種轉換有助於優化作業系統的效能和硬體資源利用。本文旨在深入探討如何進行這種轉換。如何實現從虛擬機器到實體機器的遷移？通常，虛擬機器與實體機之間的轉換過程由第三方軟體在虛擬機器外部執行。這個過程包括多個階段，涉及虛擬機器的配置和資源轉移。準備實體機器：第一步是確保實體機符合Windows的硬體需求。我們需要在實體機上備份數據，因為轉換過程將覆蓋現有數據。 *管理員帳戶的使用者名稱和密碼，具有建立系統映像的管理員權限。將虛擬
Golang時間處理：如何在Golang中將時間戳轉換為字串
Feb 24, 2024 pm 10:42 PM
Golang時間轉換：如何將時間戳轉換為字串在Golang中，時間操作是非常常見的操作之一。有時候我們需要將時間戳記轉換為字串，以便於展示或儲存。本文將介紹如何使用Golang將時間戳轉換為字串，並提供具體的程式碼範例。 1.時間戳和字串的轉換在Golang中，時間戳通常是以整數數字的形式表示的，表示的是從1970年1月1日至當前時間的秒數。而字串則
PHP 月份轉換為英文月份的實作方法詳解
Mar 21, 2024 pm 06:45 PM
這篇文章將詳細介紹如何將PHP中的月份轉換為英文月份的方法，同時給出具體的程式碼範例。在PHP開發中，有時候我們需要將數字表示的月份轉換為英文的月份，這在一些日期處理或資料展示的場景下非常實用。以下將從實作原理、具體程式碼範例和注意事項等方面進行詳解。一、實作原理在PHP中，可以透過使用DateTime類別和format方法來實現將數位月份轉換為英文月份。 Date
qq音樂怎麼轉換mp3格式 手機上qq音樂轉mp3格式
Mar 21, 2024 pm 01:21 PM
qq音樂讓大家盡情享受觀影解悶，每天都可以使用這個軟體，輕鬆滿足自己的使用，優質海量的歌曲，任由大家暢聽，也可以下載保存起來，下次聽的時候，不需要網絡，而在這裡下載的歌曲不是MP3格式的，無法在其他平台使用，會員歌曲過期後也沒有辦法再聽了，所以很多小伙伴們，都想要將歌曲轉換成MP3格式的，在這裡小編為你們提供方法，幫助大家都可以使用起來！ 1、開啟電腦qq音樂，點選右上角【主選單】按鈕，點選【音訊轉碼】，選擇【新增歌曲】選項，新增需要轉換的歌曲; 2、新增歌曲完畢，點選選擇轉換為【mp3
Java Apache Camel：打造靈活且有效率的服務導向架構
Feb 19, 2024 pm 04:12 PM
ApacheCamel是一個基於企業服務匯流排(ESB)的整合框架，它可以輕鬆地將不同的應用程式、服務和資料來源整合在一起，從而實現複雜的業務流程自動化。 ApacheCamel使用基於路由的設定方式，可以輕鬆定義和管理整合流程。 ApacheCamel的主要特點包括：靈活性：ApacheCamel可以輕鬆地與各種應用程式、服務和資料來源整合。它支援多種協議，包括Http、JMS、SOAP、FTP等。高效性：ApacheCamel非常高效，它可以處理大量的訊息。它使用非同步訊息傳遞機制，可以提高效能。可擴
