Einfacher Implementierungscode der dreistufigen nativen JS-Verknüpfung

Das Beispiel in diesem Artikel teilt eine js-Wetterabfrageanwendung als Referenz. Der spezifische Inhalt lautet wie folgt:

Funktion implementiert: Wenn die Webseite geöffnet wird Die Wetterbedingungen der Stadt, in der sich der Benutzer befindet, werden angezeigt. Geben Sie eine Stadt in das Eingabefeld ein, um andere Städte abzufragen.

Implementierungsprozess: Rufen Sie zuerst die API von Baidu Map auf, um die Stadt des Benutzers abzurufen, und rufen Sie dann die Wetter-API auf, die Daten aggregiert, um die Daten auf der Seite bereitzustellen. Da Ajax keine domänenübergreifende Unterstützung bietet, wird JSONP zum Aufrufen von Daten verwendet.

Das Implementierungsprinzip ist relativ einfach, daher werde ich nur den JS-Code veröffentlichen. Wenn Sie den vollständigen Code sehen möchten,

//调用jsonp函数请求当前所在城市
jsonp('https://api.map.baidu.com/api?v=2.0&ak=Dv1NMU23dh1sGS9n2tUouDEYY96Dfzh3&s=1&callback=getCity');
window.onload=function(){
 //请求天气车数据
 btn.onclick=function (){
  jsonp(createUrl());
 }
};
function getCity(){
 function city(result){
  jsonp(createUrl(result.name));
 }
 var cityName = new BMap.LocalCity();
 cityName.get(city);
}
// 数据请求函数
function jsonp(url){
 var script = document.createElement('script');
 script.src = url;
 document.body.insertBefore(script, document.body.firstChild);
 document.body.removeChild(script);
}
//数据请求成功回调函数，用于将获取到的数据放入页面相应位置
function getWeather(response) {
 var oSpan = document.getElementsByClassName('info');
 var data = response.result.data;
 oSpan[0].innerHTML=data.realtime.city_name;
 oSpan[1].innerHTML=data.realtime.date;
 oSpan[2].innerHTML='星期'+data.weather[0].week;
 oSpan[3].innerHTML=data.realtime.weather.info;
 oSpan[4].innerHTML=data.realtime.weather.temperature+'℃';
 oSpan[5].innerHTML=data.realtime.wind.direct;
 oSpan[6].innerHTML=data.realtime.weather.humidity+'%';
 oSpan[7].innerHTML=data.realtime.time;
 oSpan[8].innerHTML=data.life.info.ziwaixian[0];
 oSpan[9].innerHTML=data.life.info.xiche[0];
 oSpan[10].innerHTML=data.life.info.kongtiao[0];
 oSpan[11].innerHTML=data.life.info.chuanyi[0];
 
 var aDiv = document.getElementsByClassName('future_box');
 for(var i=0; i<aDiv.length; i++){
  var aSpan = aDiv[i].getElementsByClassName(&#39;future_info&#39;);
  aSpan[0].innerHTML = data.weather[i].date;
  aSpan[1].innerHTML = &#39;星期&#39;+data.weather[i].week;
  aSpan[2].innerHTML =data.weather[i].info.day[1];
  aSpan[3].innerHTML = data.weather[i].info.day[2]+&#39;℃&#39;;
 }
 changeImg(response);
}
//根据获取到的数据更改页面中相应的图片
function changeImg(data){
 var firstImg = document.getElementsByTagName("img")[0];
 var firstWeatherId=data.result.data.realtime.weather.img;
 chooseImg(firstWeatherId,firstImg);
 
 var aImg = document.getElementById(&#39;future_container&#39;).getElementsByTagName(&#39;img&#39;);
 for(var j=0; j<aImg.length; j++){
  var weatherId = data.result.data.weather[j].info.day[0];
  chooseImg(weatherId,aImg[j]);
 }
}
//选择图片
function chooseImg(id,index){
 switch(id){
  case &#39;0&#39;:
   index.src=&#39;images/weather_icon/1.png&#39;;
   break;
  case &#39;1&#39;:
   index.src=&#39;images/weather_icon/2.png&#39;;
   break;
  case &#39;2&#39;:
   index.src=&#39;images/weather_icon/3.png&#39;;
   break;
  case &#39;3&#39;:
  case &#39;7&#39;:
  case &#39;8&#39;:
   index.src=&#39;images/weather_icon/4.png&#39;;
   break;
  case &#39;6&#39;:
   index.src=&#39;images/weather_icon/6.png&#39;;
   break;
  case &#39;13&#39;:
  case &#39;14&#39;:
  case &#39;15&#39;:
  case &#39;16&#39;:
   index.src=&#39;images/weather_icon/5.png&#39;;
   break;
  case &#39;33&#39;:
   index.src=&#39;images/weather_icon/7.png&#39;;
   break;
  default:
   index.src=&#39;images/weather_icon/8.png&#39;;
 }
}
//根据城市名创建请求数据及url
function createUrl(){
 var cityName = &#39;&#39;;
 if(arguments.length == 0) {
  cityName = document.getElementById(&#39;text&#39;).value;
 }else{
  cityName = arguments[0];
 }
 var url = &#39;https://op.juhe.cn/onebox/weather/query?cityname=&#39; + encodeURI(cityName) + &#39;&key=1053d001421b886dcecf81a38422a1a2&callback=getWeather&#39;;
 return url;
}

Ein einfacher kleiner Demo, und es gibt noch viele mehr. Sollte es Mängel geben, ist jeder herzlich willkommen, Verbesserungsvorschläge zu machen.

Morgen werde ich einige der aufgetretenen Probleme und ihre Lösungen aktualisieren, bitte achten Sie darauf.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Weitere Artikel zum einfachen Implementierungscode der dreistufigen nativen JS-Verknüpfung finden Sie auf der chinesischen PHP-Website!