Ajax obtains data by city name (National Weather Forecast API) and ajaxapi

Ajax obtains data by city name (National Weather Forecast API) and ajaxapi

Preview a chart (relatively simple and rough)

Aggregate Data National Weather Forecast interface: https://www.juhe.cn/docs/api/id/39

Interface address: http://v.juhe.cn/weather/index
Supported formats: json/xml
Request Method: get
Request example: http://v.juhe.cn/weather/index? Format = 2 & cityname = % E8 % 8B % 8F % E5 % B7 % 9E & key = the KEY you applied
Call example and debugging tool: API Testing Tool
Request parameter description:
Name type description
Cityname string Y city name or city ID, for example, "Suzhou", utf8 urlencode
Dtype string N returned data format: json or xml, default json
Format int N: the next 6 days forecast (future) Two return formats, 1 or 2. The default value is 1.
Key string Y the key you applied

Some HTML code:

<! DOCTYPE html> 
JavaScript section:
/*
* 1. Enter the city name.
* 2. Send a request when you click
* 3. The response is successfully rendered.
**/
$ ('# Search'). on ('click', function (){
Var city = $ ('# City'). val () | 'beijing ';
$ 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 = "date, temperature, weather, and wind direction ";
Certificate ('{mufeng'}.html ("<p>" + 'current: '+ sk. temp + '℃, '+ sk. wind_direction + sk. wind_strength + ',' + 'air humidity '+ sk. humidity + ', Update time' + sk. time + "</p> <p style = 'padding-bottom: 10px; '>" + today. city + 'Today is: '+ today. date_y + ''+ today. week + ',' + today. temperature + ',' + today. weather + ',' + today. wind + "<p> </p> ");
Certificate ('future ureure'0000.html ("<p>" + 'future: '+ futur [0]. temperature + '℃, '+ futur [0]. weather + futur [0]. wind + ',' + ', Update time' + futur [0]. week + futur [0]. date + "</p> <p style = 'padding-bottom: 10px; '>" + today. city + "<p> </p> ");
}});
});
Function urlencode (str ){
Str = (str + ''). toString ();
Return encodeURIComponent (str). replace (/! /G, '% 21'). replace (/'/g, '% 27'). replace (/\ (/g,' % 28 ').
Replace (/\)/g, '% 29 '). replace (/\ */g, '% 2A '). replace (/% 20/g, '+ ');
}
})
The preceding section describes how to use Ajax to obtain data by city name (National Weather Forecast API). I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!