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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
办公室文秘自我评价
2013/09/21 职场文书
创业计划书撰写原则
2014/01/25 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫