在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>运行后：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在JS表单中如何实现传值和URL编码转换？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Petua praktikal untuk menukar huruf Inggeris lebar penuh kepada bentuk separuh lebar
Mar 26, 2024 am 09:54 AM
Petua praktikal untuk menukar huruf Inggeris lebar penuh kepada bentuk separuh lebar Dalam kehidupan moden, kita sering bersentuhan dengan huruf Inggeris, dan kita sering perlu memasukkan huruf Inggeris apabila menggunakan komputer, telefon bimbit dan peranti lain. Walau bagaimanapun, kadangkala kita menemui huruf Inggeris lebar penuh, dan kita perlu menggunakan bentuk separuh lebar. Jadi, bagaimana untuk menukar huruf Inggeris lebar penuh kepada bentuk separuh lebar? Berikut adalah beberapa petua praktikal untuk anda. Pertama sekali, huruf dan nombor Inggeris lebar penuh merujuk kepada aksara yang menduduki kedudukan lebar penuh dalam kaedah input, manakala huruf dan nombor Inggeris separuh lebar menduduki kedudukan lebar penuh.
Bagaimana untuk menukar ODT ke Word dalam Windows 11/10?
Feb 20, 2024 pm 12:21 PM
Dalam artikel ini, kami akan menunjukkan kepada anda cara menukar fail OpenDocumentTextDocument (ODT) kepada Microsoft Word (Docx, DOC, dll.). Format. Cara Menukar ODT kepada Word dalam Windows 11/10 Berikut ialah cara anda boleh menukar dokumen ODT kepada format DOC atau DOCX pada Windows PC: Tukar ODT kepada Word menggunakan WordPad atau Word Kaedah pertama yang akan kami tunjukkan kepada anda ialah menggunakan WordPad atau MicrosoftWord untuk menukar ODT kepada Word. Berikut ialah langkah-langkah untuk mencapai ini: Pertama, buka aplikasi WordPad menggunakan menu Mula. Sekarang, pergi ke
Bagaimana untuk menukar fail AI kepada format CDR
Feb 19, 2024 pm 04:09 PM
Fail AI merujuk kepada fail grafik vektor yang dicipta oleh perisian Adobe Illustrator (pendek kata AI), manakala fail CDR merujuk kepada fail grafik vektor yang dicipta oleh perisian CorelDRAW. Memandangkan kedua-dua perisian ini dibangunkan oleh pengeluar yang berbeza, format fail mereka berbeza dan tidak boleh ditukar terus antara satu sama lain. Walau bagaimanapun, kami boleh menukar fail AI kepada fail CDR melalui beberapa kaedah. Kaedah penukaran yang biasa digunakan akan diperkenalkan di bawah. Langkah 1: Eksport fail AI ke format EPS AdobeIllust
Bagaimana untuk menukar mesin maya kepada mesin fizikal?
Feb 19, 2024 am 11:40 AM
Menukar mesin maya (VM) kepada mesin fizikal ialah proses memindahkan contoh maya dan perisian aplikasi yang berkaitan ke platform perkakasan fizikal. Penukaran ini membantu mengoptimumkan prestasi sistem pengendalian dan penggunaan sumber perkakasan. Artikel ini bertujuan untuk memberikan pandangan yang mendalam tentang cara membuat penukaran ini. Bagaimana untuk melaksanakan migrasi dari mesin maya ke mesin fizikal? Biasanya, proses penukaran antara mesin maya dan mesin fizikal dilakukan di luar mesin maya oleh perisian pihak ketiga. Proses ini terdiri daripada berbilang peringkat yang melibatkan konfigurasi mesin maya dan pemindahan sumber. Sediakan mesin fizikal: Langkah pertama ialah memastikan mesin fizikal memenuhi keperluan perkakasan untuk Windows. Kami perlu membuat sandaran data pada mesin fizikal kerana proses penukaran akan menimpa data sedia ada. *Nama pengguna dan kata laluan untuk akaun pentadbir dengan hak pentadbir untuk mencipta imej sistem. akan menjadi maya
Pemprosesan masa Golang: Cara menukar cap masa kepada rentetan dalam Golang
Feb 24, 2024 pm 10:42 PM
Penukaran masa Golang: Cara menukar cap masa kepada rentetan Di Golang, operasi masa adalah salah satu operasi yang sangat biasa. Kadangkala kita perlu menukar cap masa kepada rentetan untuk paparan atau penyimpanan yang mudah. Artikel ini akan memperkenalkan cara menggunakan Golang untuk menukar cap masa kepada rentetan dan memberikan contoh kod khusus. 1. Penukaran cap masa dan rentetan Di Golang, cap masa biasanya dinyatakan dalam bentuk nombor integer, yang mewakili bilangan saat dari 1 Januari 1970 hingga masa semasa. Rentetannya ialah
Penjelasan terperinci tentang kaedah pelaksanaan menukar bulan PHP kepada bulan Inggeris
Mar 21, 2024 pm 06:45 PM
Artikel ini akan memperkenalkan secara terperinci cara menukar bulan dalam PHP kepada bulan Inggeris, dan memberikan contoh kod khusus. Dalam pembangunan PHP, kadangkala kita perlu menukar bulan digital kepada bulan Inggeris, yang sangat praktikal dalam beberapa pemprosesan tarikh atau senario paparan data. Prinsip pelaksanaan, contoh kod khusus dan langkah berjaga-jaga akan diterangkan secara terperinci di bawah. 1. Prinsip pelaksanaan Dalam PHP, anda boleh menukar bulan digital kepada bulan Bahasa Inggeris dengan menggunakan kelas DateTime dan kaedah format. Tarikh
Bagaimana untuk menukar muzik qq kepada format mp3 Tukar muzik qq kepada format mp3 pada telefon mudah alih
Mar 21, 2024 pm 01:21 PM
QQ Music membolehkan semua orang menikmati menonton filem dan menghilangkan kebosanan Anda boleh menggunakan perisian ini setiap hari untuk memenuhi keperluan anda dengan mudah Sebilangan besar lagu berkualiti tinggi tersedia untuk didengari oleh semua orang Lain kali anda mendengarnya, anda tidak memerlukan sambungan Internet Lagu yang dimuat turun di sini bukan dalam format MP3 dan tidak boleh digunakan pada platform lain Selepas lagu keahlian tamat, tiada cara untuk mendengarnya lagi , ramai rakan ingin menukar lagu ke dalam format MP3 Di sini editornya Anda sediakan kaedah supaya semua orang boleh menggunakannya! 1. Buka QQ Music pada komputer anda, klik butang [Menu Utama] di penjuru kanan sebelah atas, klik [Audio Transcoding], pilih pilihan [Tambah Lagu], dan tambah lagu yang perlu ditukar; lagu, klik untuk memilih Tukar kepada [mp3]
Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap
Feb 19, 2024 pm 04:12 PM
Apache Camel ialah rangka kerja penyepaduan berasaskan Bas Perkhidmatan Perusahaan (ESB) yang mudah menyepadukan aplikasi, perkhidmatan dan sumber data yang berbeza untuk mengautomasikan proses perniagaan yang kompleks. ApacheCamel menggunakan konfigurasi berasaskan laluan untuk mentakrif dan mengurus proses penyepaduan dengan mudah. Ciri utama ApacheCamel termasuk: Fleksibiliti: ApacheCamel boleh disepadukan dengan mudah dengan pelbagai aplikasi, perkhidmatan dan sumber data. Ia menyokong pelbagai protokol, termasuk HTTP, JMS, SOAP, FTP, dll. Kecekapan: ApacheCamel sangat cekap, ia boleh mengendalikan sejumlah besar mesej. Ia menggunakan mekanisme pemesejan tak segerak, yang meningkatkan prestasi. Boleh dikembangkan
