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:

nbsp;html>

<meta>
<title>天气预报</title>
<script></script>
<link>
<p>
<script></script>
<button>天气查询</button>
<input>
</p><p>
</p><p>
</p>
<p></p>
 

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!