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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Vuex之理解Getters的用法实例
Apr 19 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
js调用网络摄像头的方法
Dec 05 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP CURL使用详解
2019/03/21 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Jquery插件写法笔记整理
2012/09/06 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
vue加载完成后的回调函数方法
2018/09/07 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
自己使用总结Python程序代码片段
2015/06/02 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python常用断言函数实例汇总
2020/11/30 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
个人简历中自我评价
2014/02/11 职场文书
奠基仪式主持词
2014/03/20 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB