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 EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue实现分页组件
Jun 16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
迟到检讨书400字
2014/01/13 职场文书
婚礼主持词
2014/03/13 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
邓小平理论心得体会
2014/09/09 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
上班迟到检讨书
2015/05/06 职场文书
python 网络编程要点总结
2021/06/18 Python