全国统一服务热线:400-633-9193

JS表单传值和URL编码转换

    网络     2018-03-09    2557

注意:


这里写了两个网页 

因为URL传过去的数据不支持中文字符和一些特殊符号 所以需要转换一下编码

实现效果:网页1的表单数据传到网页2并显示出来


网页1代码如下:

<!DOCTYPE html> 

<html> 

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

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

运行后:

  分享到:  
0.2364s