Heim >Web-Frontend >js-Tutorial >Ajax ruft Daten nach Städtenamen ab

Ajax ruft Daten nach Städtenamen ab

亚连Original: 2018-05-23 11:24:271799Durchsuche

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>

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("e388a4556c0f65e1904146cc1a846bee" + 'Strom: ' + sk.temp + '℃ , ' + sk.wind_direction + sk .wind_strength + ' , ' + 'Luftfeuchte' + sk.humidity + ' , Aktualisierungszeit' + sk.time + "94b3e26ee717c64999d7867364b1b4a35f538f825662c67bce0bd5dea6f31688" .city + ' Heute ist: ' + today.date_y + ' ' + today .week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "e388a4556c0f65e1904146cc1a846bee< ;/p>");
$('#future') .html("e388a4556c0f65e1904146cc1a846bee" + 'Future: ' + futur[0].temperature+ '℃ , ' + futur[0].weather + futur[0].wind + ' , ' + ' , Aktualisierungszeit' + futur[0].week+futur[0].date + "94b3e26ee717c64999d7867364b1b4a3c1b20431beb69d928b8b9e15edddfaeb" + today.city + "e388a4556c0f65e1904146cc1a846bee} });
});
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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse der vollständigen Schritte der Vue-Cli-Verpackung und -EinführungNächster Artikel：Analyse der vollständigen Schritte der Vue-Cli-Verpackung und -Einführung

In Verbindung stehende Artikel

Mehr sehen