uri.js的用法事例
来源于:http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js/
Get or Set Query String Values from URL using URI.js
URI.js is a mature javascript library for manipulation of URI. URI.js provides methods to get or set query string values using javascript functions on browsers.
Download URI.js or URI.min.js from Official URI.js Github Repository or build it from Here. Add it into your html page for using it in your script.
function to get Query String value from URL using URI.js
<script type="text/javascript" src="/js/URI.js"></script>
function getQueryStringValue(queryParam){
// Get current URL.
var currentURL = new URI();
// If queryParam is in the querystring of currentURL
if(currentURL.hasQuery(queryParam)){
// Get all querystring values as a json object
var qsValues = currentURL.query(true);
// return queryParam's value
return qsValues[queryParam];
}
else
{
// queryParam is not in the querystring. So return as undefined.
return undefined;
}
}
// If currentURL="http://www.ecommerce.com/product.html?customerId=27" then,
// getQueryStringValue("customerId") returns "27"
// getQueryStringValue("notPresentQueryParam") returns undefined
URI.js Introduction
URI.js offers methods for manipulating URLs. Please see below code to get an intro on few possible operations with URI.js.
// Get current URL from the browser bar.
var url = new URI();
// return http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js
// This is equivalent to window.location.href command in js.
url = new URI("http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html");
// Sets URL to http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html
url;
// return "http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html"
url.protocol());
// return "http"
url.origin();
// return "http://www.smoothprogramming.com:80"
url.hostname());
// return "www.smoothprogramming.com"
url.host());
// return "www.smoothprogramming.com:80"
url.port());
// return "80"
url.path());
// return "/tutorials/get-set-query-string-values-from-url-using-uri-js.html"
url.directory());
// return "/tutorials"
url.filename());
// return "get-set-query-string-values-from-url-using-uri-js.html"
Get Query String Values
// Querystring values
url = new URI("http://www.ecommerce.com/product.html?customerId=27&checkout=true");
// Get querystring part from URL
url.query();
// returns "customerId=27&checkout=true"
// Get Querystring value as JSON object
url.query(true);
// returns "{"customerId":"27","checkout":"true"}"
//Is customerId in the querystring list ?
url.hasQuery("customerId");
// returns true
//Is dummyQuerystr in the querystring list ?
url.hasQuery("dummyQueryStr");
// returns false
// Is customerId value = 27?
url.hasQuery("customerId", "27");
// returns true
//is customerId value = 50?
url.hasQuery("customerId", "50");
// returns false
Set Query String Values
url = new URI("http://www.ecommerce.com/product.html");
//set customerId as Querystring
url.addQuery("customerId", "27");
//returns "http://www.ecommerce.com/product.html?customerId=27"
//Remove customerId as Querystring
url.removeQuery("customerId");
// returns "http://www.ecommerce.com/product.html"
在线实例:http://codepen.io/hiralbest/pen/kXwPKP
Conclusion
This post has only most useful and important list of methods to manipulate URL using URI.js. If you are interested in detail documentation of all URI.js then, please refer URI.js Documentation Page.
References
uri.js的用法事例的更多相关文章
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- JS 正则表达式用法
JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- jQuery each和js forEach用法比较
本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...
- 【JS库】URI.js
做前端的,应该有不少人都写过操作URL的代码,比如提取问号后面的参数.或者主机名什么的,比如这样: var url="http://jszai.com/foo?bar=baz", ...
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- (转)Javascript模块化编程(三):Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 【笔记】关于require.js 的用法
最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化. 网上有不少很好的学习文章这 ...
随机推荐
- Go语言之进阶篇简单版并发服务器
1.简单版并发服务器 示例1: package main import ( "fmt" "net" "strings" ) //处理用户请求 ...
- MySql 5.7安装(随机密码,修改默认密码)两个坑
MySql 5.7安装(随机密码,修改默认密 下载了MySql 最新版本,安装的过程中,发现了很多新特性 1.data目录不见了 在进行my-default.ini配置的时候 (需要配置 # base ...
- 基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线!
基于浏览器的开源“管理+开发”工具,Pivotal MySQL*Web正式上线! https://www.sohu.com/a/168292858_747818 https://github.com/ ...
- 转: wireshark过滤语法总结
from: http://blog.csdn.net/cumirror/article/details/7054496 wireshark过滤语法总结 原创 2011年12月09日 22:38:50 ...
- 使用 mongodb 的 Docker Image 快速上手系列 lab
Docker 主要的概念 Dockerfile => 用來產生 docker image 用的(介紹) Image => 可以用來產生 docker container Container ...
- IJPay 让支付触手可及-文中有视频
IJPay 让支付触手可及 GitHub:https://github.com/Javen205/IJPay Gitee:http://gitee.com/Javen205/IJPay JPay 是对 ...
- stl 迭代器失效
1.对于基于连续内存的容器,容器元素的增删,有可能会导致迭代器的失效.考虑: int main(int argc, char* argv[]) { vector<int> intVec; ...
- my.cnf配置文件参数解释
lower_case_table_names=1#去掉大小写敏感 [client] port = 3309 socket = /home/mysql/mysql/tmp/mysql.sock [mys ...
- GB2312码表
GB2312码表 code +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F A1A0 . . · ˉ ˇ ¨ " 々 — - | … ‘ ’ ...
- Converter Standardalone 5 versus Converter Boot CD
The new Converter Standalone 5 lacks the Converter Boot CD. Fortunately you can still use the old ve ...