네이티브 js 3단계 연결의 간단한 구현 코드

이 글의 예시는 참고용으로 js 날씨 쿼리 애플리케이션을 공유합니다. 구체적인 내용은 다음과 같습니다

구현된 기능: 웹 페이지가 열리면 사용자가 위치한 도시의 기상상황이 표시됩니다. 입력창에 도시를 입력하면 다른 도시를 조회할 수 있습니다.

구현 과정: 먼저 Baidu Map의 API를 호출하여 사용자의 도시를 가져온 다음 데이터를 집계하는 날씨 API를 호출하여 데이터를 페이지에 배치합니다. ajax는 크로스 도메인을 지원하지 않기 때문에 jsonp를 사용하여 데이터를 호출합니다.

구현 원리는 비교적 간단하고, HTML과 CSS는 비교적 길기 때문에 전체 코드를 보고 싶으신 분들은

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

간단한 작은 데모, 하지만 아직 부족한 점이 많습니다. 개선을 위한 모든 분들의 제안을 환영합니다.

내일은 일부 문제와 해결 방법을 업데이트할 예정이니 많은 관심 부탁드립니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

네이티브 js 3단계 연계의 단순 구현 코드에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!