jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】


Posted in jQuery onMarch 28, 2018

本文实例讲述了jQuery实现浏览器之间跳转并传递参数功能。分享给大家供大家参考,具体如下:

one.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.slim.js"></script>
</head>
<body>
<input type="text" class="keyword"/>
<button id="searchBtn">点击</button>
<script type="text/javascript">
  $("#searchBtn").click(function() {
    var searchText = jQuery.trim($(".keyword").val());
    var searchUrl = encodeURI("two.html?searchText=" + searchText); //使用encodeURI编码
    location.href = searchUrl;
  })
</script>
</body>
</html>

two.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.slim.js"></script>
</head>
<body>
<input type="text" class="keyword1"/>
<script type="text/javascript">
  //获取 上一个搜索页面传来的参数 
  var searchUrl = window.location.href;
  var searchData = searchUrl.split("="); //截取 url中的“=”,获得“=”后面的参数
  var searchText = decodeURI(searchData[1]); //decodeURI解码
  $(".keyword1").val(searchText);
</script>
</body>
</html>

运行结果:

jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
You might like
详解PHP处理密码的几种方式
2016/11/30 PHP
如何实现JS函数的重载
2006/09/22 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
法定代表人身份证明书
2015/06/18 职场文书
体育部部长竞选稿
2015/11/21 职场文书
干部外出学习心得体会
2016/01/18 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis