Ajax gets API data of national weather forecast

This time I will bring you Ajax to obtain the national weather forecast API data. What are the precautions for Ajax to obtain the national weather forecast API data. The following is a practical case. Let’s take a look. take a look.

Preview (relatively simple and rough)

Aggregated data national weather forecast interface: https://www.juhe.cn /docs/api/id/39

Interface address: http://v.juhe.cn/weather/index
Supported format: json/xml
Request method: get
Request example: http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=KEY you applied for
Calling samples and debugging tools: API testing tool
Request parametersDescription:
Name type required description
cityname string Y City name or city ID, such as: "Suzhou", requires utf8 urlencode
dtype string N Return data format: json or xml, default json
format int N Two return formats for the next 6 days forecast (future), 1 or 2, default 1
key string Y The key you applied for

HTML part code:

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
b0472fae589efacfdc9167ddd7cd36f5
b2386ffb911b14667cb8f0f91ea547a7天气预报6e916e0f7d1e588d4f442bf645aedb2f
b9197df398584b98b2410e5b164be7af2cacc6d41bbb37262a98f745aa00fbf0
00df4a35b0411efd7658664b9edd1375
da1e4ed9b166c1457fd597723770335e
d4f5983c77987d0ae0324e24bb5ff6c72cacc6d41bbb37262a98f745aa00fbf0
e3eaba810eafb87286c1217c7ba255b9天气查询65281c5ac262bf6d81768915a4a77ac0
ed587b6614a359512e6703c59df9f2c0
29009b77e757bc1f1ec679e658842388
2ed2ef88bdf8d39fb1161be07e63a70a
94b3e26ee717c64999d7867364b1b4a3
67b71a8c322b70225f9afed221ece6b594b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3 
73a6ac4ed44ffec12cee46588e518a5e

JavaScript part:

/*
* 1.输入城市名
* 2，点击的时候发送请求
* 3.响应成功渲染页面
* */
$('#search').on('click',function(){
var city = $('#city').val()||'北京';
$citycode=urlencode(city);
url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=c82727e986a4f6cfc6ba1984f1f9183a';
$.ajax({url: url,
dataType: "jsonp",
type:"get",
data:{location:city},
success:function(data){
var sk = data.result.sk;
var today = data.result.today;
var futur = data.result.future;
var fut = "日期温度天气风向";
$(&#39;#mufeng&#39;).html("<p>" + &#39;当前: &#39; + sk.temp + &#39;℃ , &#39; + sk.wind_direction + sk.wind_strength + &#39; , &#39; + &#39;空气湿度&#39; + sk.humidity + &#39; , 更新时间&#39; + sk.time + "</p><p style=&#39;
padding-bottom
: 10px;&#39;>" + today.city + &#39; 今天是: &#39; + today.date_y + &#39; &#39; + today.week + &#39; , &#39; + today.temperature + &#39; , &#39; + today.weather + &#39; , &#39; + today.wind + "<p></p>");
$(&#39;#future&#39;).html("<p>" + &#39;未来: &#39; + futur[0].temperature+ &#39;℃ , &#39; + futur[0].weather + futur[0].wind + &#39; , &#39; + &#39; , 更新时间&#39; + futur[0].week+futur[0].date + "</p><p style=&#39;padding-bottom: 10px;&#39;>" + today.city + "<p></p>");
} });
});
function urlencode (str) { 
str = (str + &#39;&#39;).toString(); 
return encodeURIComponent(str).replace(/!/g, &#39;%21&#39;).replace(/&#39;/g, &#39;%27&#39;).replace(/\(/g, &#39;%28&#39;). 
replace(/\)/g, &#39;%29&#39;).replace(/\*/g, &#39;%2A&#39;).replace(/%20/g, &#39;+&#39;); 
} 
})

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

How Ajax reads txt and displays its content in pages

Ajax traverses jSon for data Modification and deletion

The above is the detailed content of Ajax gets API data of national weather forecast. For more information, please follow other related articles on the PHP Chinese website!