Ajax ruft Daten nach Städtenamen ab-js-Tutorial-php.cn

Ajax ruft Daten nach Städtenamen ab

亚连

Freigeben： 2018-05-23 11:24:27

Original

1798 Leute haben es durchsucht

In diesem Artikel wird die nationale Wettervorhersage-API Ajax mitgeteilt, um Daten über den Namen der Stadt zu erhalten und den Wettervorhersageeffekt über zwei Teile des HTML- und JS-Codes zu erzielen. Der Effekt wird angezeigt ist sehr gut. Interessierte Freunde können sich darauf beziehen

Vorschau (relativ einfach und grob)

Schnittstelle für aggregierte Daten zur nationalen Wettervorhersage: https://www .juhe.cn/docs/api/id/ 39

Schnittstellenadresse: http://v.juhe.cn/weather/index
Unterstütztes Format: json/xml
Anfrage Methode: get
Anfragebeispiel: http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=KEY, für das Sie sich beworben haben
Anrufbeispiel und Debugging-Tool: API-Testtool
Anfrage Parameterbeschreibung:
Namenstyp erforderliche Beschreibung
Stadtname-Zeichenfolge Y Stadtname oder Stadt-ID, z. B. „Suzhou“, utf8-URL-Code ist erforderlich
dtype-Zeichenfolge N Rückgabedaten Format: JSON oder XML, Standard-JSON
Format int N Zwei Rückgabeformate für die Prognose der nächsten 6 Tage (Zukunft), 1 oder 2, Standard 1
Schlüsselzeichenfolge Y Der Schlüssel, den Sie beantragt haben

HTML-Teilcode:

<!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>

Nach dem Login kopieren

JavaScript-Teil:

/*
* 1. Geben Sie den Namen der Stadt ein
* 2. Senden Sie eine Anfrage wenn angeklickt
* 3. Die Seite wird als Antwort erfolgreich gerendert
* */
$('#search').on('click',function(){
var city = $( '#city').val()||'Peking';
$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 = "Datum Temperatur Wetter Windrichtung";
$(' #mufeng').html("

" + 'Strom: ' + sk.temp + '℃ , ' + sk.wind_direction + sk .wind_strength + ' , ' + 'Luftfeuchte' + sk.humidity + ' , Aktualisierungszeit' + sk.time + "

" .city + ' Heute ist: ' + today.date_y + ' ' + today .week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "

< ;/p>");
$('#future') .html("

" + 'Future: ' + futur[0].temperature+ '℃ , ' + futur[0].weather + futur[0].wind + ' , ' + ' , Aktualisierungszeit' + futur[0].week+futur[0].date + "

" + today.city + "

} });
});
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, '+'); 🎜>}
})

Das bin ich. Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Ajax, um Daten dynamisch zur Dropdown-Liste hinzuzufügen

Lösen Sie den Parsererror-Fehler unter Ajax Cross perfekt -Domain-Anfrage

ajax übermittelt die Mobiltelefonnummer zur Überprüfung an die Datenbank und gibt den Statuswert zurück

Das obige ist der detaillierte Inhalt vonAjax ruft Daten nach Städtenamen ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!