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可见性过滤选择器使用示例
Jun 24 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 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开发需要注意的安全问题
2010/09/01 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
JavaScript this 深入理解
2009/07/30 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python语言的变量认识及操作方法
2018/02/11 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
社区健康教育实施方案
2014/03/18 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
实习计划书范文
2015/01/16 职场文书
行政撤诉申请书
2015/05/18 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
python内置模块之上下文管理contextlib
2022/06/14 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python