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简单实现父子窗口传值功能示例【未使用iframe框架】
  • JS实现向iframe中表单传值的方法
(0)

相关推荐

  • JS实现向iframe中表单传值的方法

    本文实例讲述了JS实现向iframe中表单传值的方法.分享给大家供大家参考,具体如下: 给iframe加contentWindow属性后,才能赋值,在IE,firefox测试一切ok. 例如: 页面a.jsp <script language="JavaScript"> function ExecuteSql() { var FormObj = document.getElementById("ResultShowFrame").contentWindo

  • JS简单实现父子窗口传值功能示例【未使用iframe框架】

    本文实例讲述了JS简单实现父子窗口传值功能.分享给大家供大家参考,具体如下: 父窗口页面father.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>父窗口 </TITLE> <script language="javascript"> <!-- functio

  • JS表单传值和URL编码转换

    注意: 这里写了两个网页 因为URL传过去的数据不支持中文字符和一些特殊符号 所以需要转换一下编码 实现效果:网页1的表单数据传到网页2并显示出来 网页1代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

  • js表单提交和submit提交的区别实例分析

    本文实例分析了js表单提交和submit提交的区别.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • 学习vue.js表单控件绑定操作

    本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->

  • JS表单验证的代码(常用)

    最近没有项目做,有点空余时间,小编把日常比较常用的js表单验证代码整理分享到我们平台,供大家学习,需要的朋友参考下吧! 注册验证: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = jQuery("#ed

  • JS表单提交验证、input(type=number) 去三角 刷新验证码

    在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑:注意点: 1.只有通过form里面的 <button type="submit" >提交</button>进行表单的提交才会触发form的onSubmit事件,如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件 2. onSubmit事件的正确写法是:<form action="

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

  • js表单登陆验证示例

    本文实例讲述了js表单登陆验证的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • js表单处理中单选、多选、选择框值的获取及表单的序列化

    本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

  • js表单验证实例讲解

    本文实例为大家分享了js表单验证,供大家参考,具体内容如下 JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证. 被JavaScript 验证的这些典型的表单数据有: 1).用户是否已填写表单中的必填项目? 2).用户输入的邮件地址是否合法? 3).用户是否已输入合法的日期? 4).用户是否在数据域 (numeric field) 中输入了文本? gspan.html <html> <head> <title>表单验证实例</

  • js表单元素checked、radio被选中的几种方法(详解)

    0.环境 <input type="checkbox"  value="lol"/>lol var lol = document.getElementsByTagName("input")[0]; 1.HTML DOM a.lol.checked = true; 属性的值可以不是lol,只要转为布尔值的时候为true就可以,取值时只有true.false两种 不会增加checked标记 b.lol.click(); 不会增加check

随机推荐