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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
用js实现in_array的方法
Nov 05 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Vue中使用vux的配置详解
May 05 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue-父子组件和ref实例详解
Nov 10 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
自荐书格式
2013/12/01 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
买房协议书
2014/04/11 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
电视新闻稿
2015/07/17 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
队名及霸气口号大全
2015/12/25 职场文书
警用民用对讲机找不同
2022/02/18 无线电
windows系统安装配置nginx环境
2022/06/28 Servers