JS表单传值和URL编码转换


Posted in Javascript onMarch 03, 2018

注意:

这里写了两个网页

因为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表单传值和URL编码转换

本文转载于:https://www.idaobin.com/archives/276.html

Javascript 相关文章推荐
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
js实现省市级联效果分享
Aug 10 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
vue中实现移动端的scroll滚动方法
Mar 03 #Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 #Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 #Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 #Javascript
js操作二进制数据方法
Mar 03 #Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP中session变量的销毁
2014/02/27 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
JS高级笔记
2011/07/13 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python基于socket函数实现端口扫描
2020/05/28 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
村官工作鉴定评语
2014/01/27 职场文书
留学推荐信英文范文
2015/03/26 职场文书
建党伟业电影观后感
2015/06/01 职场文书
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL