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使用手册之 事件处理
Mar 24 Javascript
Stop SQL Server
Jun 21 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
深入理解js中this的用法
May 28 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 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
星际流派综述
2020/03/04 星际争霸
缅甸的咖啡简史
2021/03/04 咖啡文化
php mysql数据库操作分页类
2008/06/04 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
js Function类型
2011/12/04 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
jQuery操作css样式
2017/05/15 jQuery
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
利用python开发app实战的方法
2019/07/09 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
党校自我鉴定范文
2013/10/02 职场文书
高中班主任寄语
2019/06/21 职场文书