uri.js的用法事例

Posted 一个勤奋的胖子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

JavaScript
<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.

JavaScript
// 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

JavaScript
// 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

JavaScript
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
URI.js Github Repo

以上是关于uri.js的用法事例的主要内容,如果未能解决你的问题,请参考以下文章

SQL Select 语句的用法

JS库URI.js

编程思想与算法

jquery中的$的特殊用法

Xcode中的变量模板(variable template)的用法

常用编程思想与算法