js获取url各项方法

转自:https://www.cnblogs.com/Arison/p/5286368.html

window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法。

URL即:统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等


http://localhost/test/test.htm?id=1
代码如下 复制代码

<html>
<head>
</head>
<body>
<script languge=javascript>
alert(window.location.pathname); --返回 /test/test.htm
alert(window.location.search); --返回 ?id=1
alert(window.location.href); --返回 http://localhost/test/test.htm?id=1
</script>
</body>
</html>

location对象 含有当前URL的信息. 属性 href 整个URL字符串.
protocol 含有URL第一部分的字符串,如http:
host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
hostname 包含URL中主机名的字符串.如http://www.cenpok.net ;
port 包含URL中可能存在的端口号字符串.
pathname URL中"/"以后的部分.如~list/index.htm
hash "#"号(CGI参数)之后的字符串.
search "?"号(CGI参数)之后的字符串.

 


对于这样一个URL
代码如下 复制代码

http://www.php230.com :80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值:
代码如下 复制代码
http://www.php230.com :80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:www.php230.com

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:""

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

### JavaScript 中使用天气 API 的教程 要在 JavaScript 中使用天气 API,通常需要遵循以下几个方面: #### 1. 获取城市代码 为了调用天气 API,首先需要获取目标城市的唯一标识符——城市代码。这可以通过两种常见的方式完成[^1]: - **手动查询**:访问中国天气网或其他支持的城市列表页面,找到对应城市并记录其代码。 - **自动检索接口**:部分天气服务提供商提供了基于城市名称或地理坐标的搜索功能。 #### 2. 注册开发者账号与申请密钥 (API Key) 大多数公开可用的天气 API 都要求使用者注册成为开发者,并获得专属的应用程序编程接口密钥(即 `API key`)。此密钥用于验证身份以及追踪用量情况。例如 和风天气 就是一个较为知名的选项,尽管它可能存在文档更新滞后的问题[^2]。 #### 3. 构建 HTTP 请求发送至指定端点 一旦拥有了必要的参数(如城市 ID 或坐标位置),就可以构建 GET 请求来向服务器索取数据了。下面展示了一段利用 Fetch API 实现简单气象信息抓取的例子: ```javascript // 替换 YOUR_API_KEY 为你自己的有效密钥字符串 const apiKey = 'YOUR_API_KEY'; const cityCodeOrLocation = 'CH1010101'; // 这里填写具体地点编码或者经纬度值 async function fetchWeatherData() { try { const response = await fetch(`https://devapi.qweather.com/v7/weather/now?location=${cityCodeOrLocation}&key=${apiKey}`); if (!response.ok) throw new Error('Network response was not ok'); const weatherInfo = await response.json(); console.log(weatherInfo); } catch(error){ console.error("There has been a problem with your fetch operation:", error.message); } } fetchWeatherData(); ``` 上述脚本中的 URL 地址指向了和风科技提供的实时天气状况接口之一;实际项目开发过程中可能还需要考虑跨域资源共享(CORS),错误处理机制等方面的内容。 #### 4. 解析返回的结果集 成功接收到响应之后,则需按照 JSON 结构解析其中包含的各项属性字段。比如温度、湿度百分比等等实用指标都可以从中提取出来供前端界面渲染之用。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值