Ajax obtient les données API des prévisions météorologiques nationales-js tutoriel-php.cn

Ajax obtient les données API des prévisions météorologiques nationales

php中世界最好的语言

Libérer： 2018-04-03 11:15:36

original

3464 Les gens l'ont consulté

Cette fois, je vais vous apporter les données API d'Ajax pour obtenir les Prévisions météorologiques nationales. Quelles sont les précautions pour Ajax pour obtenir les données API des prévisions météorologiques nationales. est un cas pratique. Jetons un coup d'oeil.

Aperçu (relativement simple et approximatif)

Interface nationale de prévision météorologique des données d'agrégation : https://www.juhe.cn /docs/api/id/39

Adresse de l'interface : http://v.juhe.cn/weather/index
Format pris en charge : json/xml
Méthode de requête : get
Exemple de demande : http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=KEY pour lequel vous avez postulé
Échantillon d'appel et outil de débogage : API Outil de test
Paramètres de demande Description :
Type de nom requis description
chaîne de nom de ville Y Nom de la ville ou identifiant de ville, tel que : "Suzhou", nécessite un code urlen utf8
chaîne de type dtype N Format des données de retour : json ou xml, json par défaut
format int N Deux formats de retour pour les prévisions des 6 prochains jours (futurs), 1 ou 2, par défaut 1
chaîne de clé Y La clé pour laquelle vous avez demandé

Code de la partie HTML :

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" >
<title>天气预报</title>
<script src="jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="w.css">
<p id="mf_weather">
<script src="w.js"></script>
<button id="search">天气查询</button>
<input id="city" type="text" value="tbody">
<p class="ctn">
<p id="mufeng">
</p>
<p id="future"></p>
</p> 
</html>

Copier après la connexion

Partie JavaScript :

/*
* 1.输入城市名
* 2，点击的时候发送请求
* 3.响应成功渲染页面
* */
$(&#39;#search&#39;).on(&#39;click&#39;,function(){
var city = $(&#39;#city&#39;).val()||&#39;北京&#39;;
$citycode=urlencode(city);
url=&#39;http://v.juhe.cn/weather/index?format=2&cityname=&#39;+$citycode+&#39;&key=c82727e986a4f6cfc6ba1984f1f9183a&#39;;
$.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;); 
} 
})

Copier après la connexion

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment Ajax lit le txt et affiche son contenu dans les pages

Ajax traverse jSon pour la modification des données et suppression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!