js ajax跨域请求之天气查询

最新推荐文章于 2022-07-05 08:58:56 发布

2b0x

最新推荐文章于 2022-07-05 08:58:56 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习记录文章标签： ajax javascript js跨域请求天气查询 ajax跨域请求

本文链接：https://blog.youkuaiyun.com/SoulArbiter/article/details/75675341

本文介绍了如何使用JavaScript的AJAX进行跨域请求，以实现天气查询功能。作者在PC端创建了一个简单的天气查询DEMO，通过JSONP解决跨域问题，利用Yahoo提供的JSONP代理服务完成数据获取。文章提供了相关代码示例和源码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js的跨域一直是个让人头疼的问题

老爸入了个新手机嫌弃自带天气查询不好功能太多，于是就想用自己写一个简单的天气查询

所以先在pc端写了个demo

因为第一次在js跨域，之前听过js跨域就是坑，嗯，领悟到了。

=====================分割线=====================

废话不说，讲正事。

先贴代码：

btn.onclick=function(){
		var place=$("#weather").val();//获取输入框内容
		var Url="http://www.sojson.com/open/api/weather/json.shtml?city="+place;////Url前段为天气查询api，度娘给的~  city后面带的字段为uft8的UriEncode码
	    $.ajax({
	        url: 'http://query.yahooapis.com/v1/public/yql',
	        dataType: 'jsonp',
	        data: {
//	            q: "select * from json where url=\"http://www.sojson.com/open/api/weather/json.shtml?city=%E5%8C%97%E4%BA%AC\"", //url为要请求的地址
	            q: "select * from json where url=\"" +Url+"\"",
	            format: "json" 
	        },
	        success: function (d) {
//          	    alert(JSON.stringify(d))//远程json数据放在query.results下
//	            alert(d.query.results.js