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实现的网页局布刷新效果
Dec 01 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
轻松搞定js表单验证
Oct 13 Javascript
AngularJS指令用法详解
Nov 02 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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/10/09 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
利用python批量检查网站的可用性
2016/09/09 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
Django如何实现防止XSS攻击
2020/10/13 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
设备动力科岗位职责范本
2014/02/23 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
七年级英语教学反思
2016/02/15 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS