纯html页面中js如何获得项目路径

Posted 挑战者V

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯html页面中js如何获得项目路径相关的知识,希望对你有一定的参考价值。

js,全称javascript,不过虽然是以java开头,不过与java一点关系都没有。

js和java有如下区别:

(1)js是浏览器端的语言,而java是服务器端的语言。

(2)js是动态语言,java是静态语言。

(3)java是基于面向对象的编程语言,而js虽有对象这个概念,但是只是基于对象而不能直接继承;

这里要提一点动态和静态是什么意思?

简单的说,动态就是不需要编译就能执行,而静态需要编译执行。

现在比较流行的就是前后端分离,如果用纯html开发+js获取后台数据,那么路径又怎么获得的呢?

既然是浏览器,那不得不提一个web开发最基础也最重要的东西,HTTP协议。

这里我要引用一位朋友的话:

HTTP请求具有如下特点:

(1)简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。

(2)灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

(3)无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

(4)无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。
(5)支持B/S及C/S模式。

 

这里还不得不提一个概念:

HTTP请求中的URL

 

HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接。URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息

URL,全称是UniformResourceLocator, 中文叫统一资源定位符,是互联网上用来标识某一处资源的地址。以下面这个URL为例,介绍下普通URL的各部分组成:

http://www.yc520.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

从上面的URL可以看出,一个完整的URL包括以下几部分:
(1)协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符

(2)域名部分:该URL的域名部分为“www.yc520.com”。一个URL中,也可以使用IP地址作为域名使用

(3)端口部分:跟在域名后面的是端口,域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分,如果省略端口部分,将采用默认端口

(4)虚拟目录部分:从域名后的第一个“/”开始到最后一个“/”为止,是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”

(5)文件名部分:从域名后的最后一个“/”开始到“?”为止,是文件名部分,如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止,是文件部分,如果没有“?”和“#”,那么从域名后的最后一个“/”开始到结束,都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分,如果省略该部分,则使用默认的文件名

(6)锚部分:从“#”开始到最后,都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分

(7)参数部分:从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。

 

下面我们进入正题,如何通过js获取项目路径?

如下js代码即可获取:

/**
 * 项目路径
 */

window.onload=function(){
    getPath();
}

function getPath(){

    var pathName = document.location.pathname;
    var index = pathName.substr(1).indexOf("/");
    var result = pathName.substr(0,index+1);
    $("#path").val(result);


}

 

关于js这部分,我将在后续写一个连载系统篇为大家详细介绍和讲解js。一来分享心得,二来总结。

 



以上是关于纯html页面中js如何获得项目路径的主要内容,如果未能解决你的问题,请参考以下文章

如何在网站页面完全加载时抓取它(js,css all loaded)

如何使子表单行项目在 zoho creator 片段页面的 HTML 表格中仅出现一次?

普通JAVA类 如何获取,WEB项目的根路径

纯js实现html转pdf

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

如何在html页面动态加载js文件