Home > Article > Web Front-end > Sharing knowledge points on JS form value passing and URL encoding conversion

Sharing knowledge points on JS form value passing and URL encoding conversion

小云云Original: 2018-03-05 09:19:201052browse

Note:

Two web pages are written here

Because the data passed by the URL does not support Chinese characters and some special symbols, the encoding needs to be converted

Achievement effect: The form data of web page 1 is transferred to web page 2 and displayed

The code of web page 1 is as follows:

<!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>

The code of web page 2 is as follows :

<!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>

After running:

##Related recommendations:

JS to iframe Implementation method of passing value in form ), encodeURI(), encodeURIComponent()

The above is the detailed content of Sharing knowledge points on JS form value passing and URL encoding conversion. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript module loader detailsNext article：JavaScript module loader details

See more

Sharing knowledge points on JS form value passing and URL encoding conversion

Related articles