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 相关文章推荐
热点新闻滚动特效的js代码
Aug 17 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
jQuery设计思想
Mar 07 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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
一篇不错的PHP基础学习笔记
2007/03/18 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
js实现筛选功能
2020/11/24 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
浅析python协程相关概念
2018/01/20 Python
TensorFlow实现创建分类器
2018/02/06 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python eventlet绿化和patch原理
2020/11/21 Python
python 解决函数返回return的问题
2020/12/05 Python
CNC数控操作工岗位职责
2013/11/19 职场文书
军训学生自我鉴定
2014/02/12 职场文书
经典婚礼主持词
2014/03/13 职场文书
学生手册评语
2014/05/05 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
九九重阳节标语
2014/10/07 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python