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学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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 动态添加记录
2009/03/10 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
js操作二进制数据方法
2018/03/03 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python多图片合并PDF的方法
2019/01/03 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python统计字符的个数代码实例
2020/02/07 Python
python打开文件的方式有哪些
2020/06/29 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
简短的公司员工自我评价分享
2013/11/13 职场文书
大学自我评价
2014/02/12 职场文书
大学毕业寄语大全
2014/04/10 职场文书
团支部建设方案
2014/05/02 职场文书
公司总经理任命书
2014/06/05 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers