Code d'implémentation simple de la liaison à trois niveaux natif js

L'exemple de cet article partage une application de requête météo js pour votre référence. Le contenu spécifique est le suivant

Fonction implémentée : lorsque la page Web est ouverte, la Les conditions météorologiques de la ville où se trouve l'utilisateur sont affichées. Entrez une ville dans la zone de saisie pour interroger d'autres villes.

Processus de mise en œuvre : appelez d'abord l'API de Baidu Map pour obtenir la ville de l'utilisateur, puis appelez l'API météo qui regroupe les données pour mettre les données sur la page. Étant donné qu'Ajax ne prend pas en charge plusieurs domaines, jsonp est utilisé pour appeler des données.

Le principe de mise en œuvre est relativement simple. HTML et CSS sont relativement longs, je ne publierai donc que le code js. Si vous souhaitez voir le code complet,

//调用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;
}

Un petit simple. démo, et il y en a bien d'autres. S'il y a des lacunes, tout le monde est invité à faire des suggestions d'amélioration.

Demain je mettrai à jour certains des problèmes rencontrés et leurs solutions, merci d'être attentif.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés au code d'implémentation simple de la liaison à trois niveaux natif js, veuillez faire attention au site Web PHP chinois !