zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Javascript基础——函数
    Javascript基础知识(二)
    Javascript基础知识(一)
    base64编码成功后并在页面上显示出想要展现的图片张数
    JavaScript结合canvas获取图片某一区域的rgba平均值的方法
    继承的几种方法
    简易模拟下拉框
    无缝轮播图
    事件的绑定方式
    数组
  • 原文地址:https://www.cnblogs.com/ys-wuhan/p/6402378.html
Copyright © 2011-2022 走看看