admin管理员组文章数量:1534189
一、浏览器端HTTP请求的方式
1) 通过地址栏发送GET请求
2) 通过a标签发送GET请求
3) 通过form表单发送GET请求、POST请求
4) 通过Ajax发送GET请求、POST请求
二、浏览器端URL路径【绝对路径、相对路径】
1.1 绝对路径
1、绝对路径一般来说主要有两种形式:
1) 完整的磁盘路径:
D:\mytest\web\images\pic.jpg是一个绝对路径。它代表图片在磁盘中的位置。
不过在web中很少使用此种形式的绝对路径。
2) 完整的url路径:
http://www.softwhy.com/images/pic.jpg也是一个绝对路径。它虽然看没有描述文件的完整路径,其实不然,域名会指向磁盘的一个目录。
那么一个带有域名的url地址也是一个绝对路径。
<a href="http://localhost:3030/test">蚂蚁部落欢迎您</a>
1.2 相对路径
1、相对路径首先要确定一个路径参考点,其他文件的路径都是相对于当前文件位置来确定的,
2、相对路径语法:
1)/ 代表根目录。
在服务器端, /代表WebRoot根目录
在HTML中, /代表 http://域名:端口/
2)./ 表示当前目录,在HTML中,可以省略。
3)../ 代表当前文件所在目录的上一级目录。
4)../../ 代表当前文件所在目录的上上级目录。
5)../.../../ 可以依次类推。
3、注意:
1) 在浏览器端使用相对路径,浏览器在请求时,会自动补充为完整路径。
2) 在浏览器端 / 代表 【http://域名:端口/】
3) 在浏览器端 ./可以省略不写。
1)相对路径
同级目录下的文件,例如从ah-1.html文件链接到ah-2.html文件
<a href="ah-2.html">蚂蚁部落欢迎您</a>
下级目录下的文件,例如从bh-1.html文件链接到bh-1-1.html文件
<a href="b-1/bh-1-1.html">蚂蚁部落欢迎您</a>
上级目录下的文件,例如从bh-1-1.html文件连接到bh-1.html文件
<a href="../bh-1.html">蚂蚁部落欢迎您</a>
上上级目录下的文件,例如从ah-1-1-1.html文件链接到ah-1.html文件
<a href="../../ah-1.html">蚂蚁部落欢迎您</a>
使用/可以直接回到根目录下
<a href="/b/b-1/ah-1.html">蚂蚁部落欢迎您</a>
2)相对路径注意事项
>>>>>> 在浏览器端使用相对路径,浏览器在请求时,会自动补充为完整路径
在浏览器端使用相对路径,
点击链接,浏览器会自动补充为完整路径
<a href="index.html">xxx</a>
>>>>>> 在浏览器端 / 代表 【http://域名:端口/】
在浏览器端/代表【http://域名:端口/】。
点击链接,浏览器会自动补充为完整路径。
<a href="/index.html">xxx</a>
>>>>>> 在浏览器端 ./ 代表 【当前目录】,可省略不写
在浏览器端 ./ 代表 当前目录,可省略不写。
所以这两种方式等价。
<a href="index.html">xxx</a>
<a href="./index.html">xxx</a>
1.3 浏览器端URL路径案例
1)ajax请求URL
>>>>>> ./ 表示当前目录。可省略不写
在 【Demo/t1/index.html】 中访问testJq或 ./testJq,浏览器自动补充完整路径为http://localhost:3030/Demo/t1/testJq
$.ajax({
url:"testJq",
data:'xxxx',
success:function(data){
console.log(data)
},
error:function(){
alert("解析报错")
}
})
$.ajax({
url:"./testJq",
data:'xxxx',
success:function(data){
console.log(data)
},
error:function(){
alert("解析报错")
}
})
>>>>>> / 表示根目录。在浏览器中代表【http://域名:端口/】
在 【Demo/t1/index.html】 中访问/testJq,浏览器自动补充完整路径为http://localhost:3030/Demo/testJq
$.ajax({
url:"/testJq",
data:'xxxx',
success:function(data){
console.log(data)
},
error:function(){
alert("解析报错")
}
})
>>>>>> 绝对路径
$.ajax({
url:"http://32.13.14.22:8888/testJq",
data:'xxxx',
success:function(data){
console.log(data)
},
error:function(){
alert("解析报错")
}
})
2)a标签请求URL
>>>>>> ./ 表示当前目录。可省略不写
在 【Demo/t1/index.html】 中访问index2.html 或 ./index2.html,浏览器自动补充完整路径为http://localhost:3030/Demo/t1/index2.html
<a href="index2.html">xxx</a>
<a href="./index2.html">xxx</a>
>>>>>> / 表示根目录。在浏览器中代表【http://域名:端口/】
在 【Demo/t1/index.html】 中访问index2.html,浏览器自动补充完整路径为http://localhost:3030/index2.html
<a href="/index2.html">xxx</a>
>>>>>> 绝对路径
<a href="http://32.13.14.22:8888/cc/index.html">xxx</a>
3)资源链接路径
在 【Demo/index.html】 中引入【Demo/jq/jquery-1.12.4.js】
<script type="text/javascript" src="jq/jquery-1.12.4.js"></script>
<script type="text/javascript" src="./jq/jquery-1.12.4.js"></script>
在 【Demo/index.html】 中引入【/jq/jquery-1.12.4.js】
<script type="text/javascript" src="/jq/jquery-1.12.4.js"></script>
绝对路径
<script src="https://cdn.bootcdn/ajax/libs/axios/0.21.1/axios.js"></script>
版权声明:本文标题:浏览器端URL路径 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1726870762a1087837.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论