Ajax obtains data via City name (National Weather forecast API) _ajax related

Preview diagram (simpler and rougher)

Aggregation data National Weather forecast interface: HTTPS://WWW.JUHE.CN/DOCS/API/ID/39

Interface Address: Http://v.juhe.cn/weather/index
Support format: Json/xml
Request Mode: Get
Request Example: http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key= The key you requested
Invoking the sample and Debugging Tools: API Test Tools
Request Parameter Description:
Name type must fill in description
CityName string Y city name or city ID, such as: "Suzhou", Need UTF8 UrlEncode
Dtype string N returns data format: JSON or XML, default JSON
Format int N forecast for next 6 days (future) Two return formats, 1 or 2, default 1
Key string Y The key you requested

HTML Section Code:

<! DOCTYPE html>
 
 

JavaScript section:

/*
* 1. Enter city name
* 2, send the request when clicked
* 3. Response to the successful rendering page
* */
$ (' #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 wind";
$ (' #mufeng '). HTML ("<p>" + ' current: ' + sk.temp + ' ℃, ' + sk.wind_direction + sk.wind_strength + ', ' + ' air humidity ' + sk.hum Idity + ', 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> ');
$ (' #future '). HTML ("<p>" + ' Future: ' + futur[0].temperature+ ' ℃, ' + futur[0].weather + futur[0].wind + ', ' + ', update Between ' + 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 above is a small set to introduce Ajax through the city name to get data (National Weather forecast API), I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!