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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
微信小程序 教程之模板
Oct 18 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
js函数般调用正则
2008/04/08 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python增加图像对比度的方法
2019/07/12 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
一些.net面试题
2014/10/06 面试题
学校联谊活动方案
2014/02/15 职场文书
企业环保标语
2014/06/10 职场文书
植物生产学专业求职信
2014/08/08 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL