添加jQuery方法解析url查询部分

Web前端不同页面间传值可以使用 cookies、localStorage 和 sessionStorage 等本地存储。

但是，今天我们尝试使用 url 查询，假设我们要传递字符串 str 到 modify.html 页面：

var str = "name=Bob Chen&gender=男&date=1998/04/26&idNumber=430523000000000000&telNumber=13400007511&email=2099367442@qq.com&city=北京";

1、使用encodeURIComponent编码：

location.href = "modify.html?"   encodeURIComponent(str);

url格式如下：

domain:port/path/modify.html?name=Bob Li&gender=男&date=1998/04/26&idNumber=430523000000000008&telNumber=13400007511&email=2099367442@qq.com&city=北京

2、使用encodeURI编码：

location.href = "modify.html?"   encodeURI(str);

url格式如下：

domain:port/path/modify.html?name=Bob Chen&gender=男&date=1998/04/26&idNumber=430523000000000000&telNumber=13400007511&email=2099367442@qq.com&city=北京

通过url查询传值后，接下来我们需要解析url，我们为 jQuery 对象添加新方法 parseUrl 来解析url查询：

(function($) {$.parseUrl = function() {var paramObj = {},paramsArr = decodeURIComponent(location.href).split("?")[1].split("#")[0].replace(/\ /g, " ").split("&"),i = 0, len = paramsArr.length;for (; i < len; i  ) {var param = paramsArr[i].split("=")[0].trim(),value = paramsArr[i].split("=")[1].trim();if (param == "date") {paramObj[param] = value.replace(/\//g, "-");} else {paramObj[param] = value;}}return paramObj;}
})(jQuery);

然后，我们就可以通过 paramObj 的属性来访问传递的数据了：

var paramObj = $.parseUrl();
console.log(paramObj['name']);

更多专业前端知识，请上【猿2048】www.mk2048.com

添加jQuery方法解析url查询部分相关推荐

NPM酷库：qs，解析URL查询字符串
NPM酷库,每天两分钟,了解一个流行NPM库. Node.js 标准库中有一个库叫querystring,这个库用来处理URL查询字符串: const querystring = require('q ...
jQuery方法解析(一)append
接下来几天俺会让俺媳妇随机挑几个jq的函数方法,然后我查看源码,以及加入自己的理解写几个博文,如果大家有特别希望了解的可以回复,这样我就不用让俺媳妇挑了. 今天以及接下来几天的jq均已 ...
使用php解析url中出现\u002乱码问题的方法
使用php解析url中出现\u002乱码问题的方法封装方法封装方法 //解析url去除\u002 function decodeUnicode($str) {return preg_replace ...
php动态添加查询,php动态添加url查询参数的方法，php动态url参数_PHP教程
php动态添加url查询参数的方法,php动态url参数本文实例讲述了php动态添加url查询参数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以动态为url添加key-value查询参数 ...
JQuery 方法查询大全
From:https://www.cnblogs.com/zengjie123/p/4893546.html jQuery 参考手册 - 选择器:https://www.w3school.com.cn ...
Go 学习笔记（50）— Go 标准库之 net/url（查询转义、查询参数增/删/改/查、解析URL）
1. URL 概述 import "net/url" url 包解析 URL 并实现了查询的转码.URL 提供了一种定位因特网上任意资源的手段,但这些资源是可以通过各种不同的方案( ...
取出url中的字符_如何在JavaScript中解析URL：例如主机名，路径名，查询，哈希？...
统一资源定位符(缩写URL)是对Web资源(网页,图像,文件)的引用.URL指定资源位置和检索资源的机制(http,ftp,mailto). 例如,这是此博客文章的URL: 通常,您需要访问URL的特 ...
ajax 提交间隔,jQuery+Ajax实现限制查询间隔的方法
本文实例讲述了jQuery+Ajax实现限制查询间隔的方法.分享给大家供大家参考,具体如下: Jquery异步查询加载效果 .span_query { cursor:pointer;} $(funct ...
BootStrap使用方法为BootStrap3添加jquery.min.js文件（简单易懂）_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件一.前言二.BootStrap简介三.BootStrap3的使用方法 (1)先去官网找到BootStrap3这个版本的文档. (2)配置B ...

添加jQuery方法解析url查询部分

添加jQuery方法解析url查询部分相关推荐

最新文章

热门文章