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

Source: Internet
Author: User
Tags key string urlencode

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.