JS表单传值和URL编码转换

2024-09-28 16:35:12

注意：

这里写了两个网页

因为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中表单传值的方法

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

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

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

JS表单传值和URL编码转换

您可能感兴趣的文章:

相关推荐

随机推荐