Ajax는 도시 이름으로 데이터를 얻습니다.-JS 튜토리얼-php.cn

Ajax는 도시 이름으로 데이터를 얻습니다.

亚连

풀어 주다： 2018-05-23 11:24:27

원래의

1761명이 탐색했습니다.

이 글에서는 도시 이름을 통해 데이터를 얻는 국가 일기예보 API Ajax를 공유하고, 도시에 들어가면 두 부분의 html과 js 코드를 통해 일기예보 효과가 나타납니다. 관심 있는 친구들은 미리보기를 참고하세요

사진(비교적 단순하고 대략적임)

집계 데이터 전국 일기예보 인터페이스: https://www.juhe.cn/docs/api/id/39

인터페이스 주소: http://v.juhe.cn /weather/index
지원 형식: json/xml
요청 방법: get
요청 예: http://v.juhe.cn/weather/index?format= 2&cityname=%E8%8B%8F%E5%B7%9E&key =신청하신 KEY
호출 샘플 및 디버깅 도구: API 테스트 도구
요청 매개변수 설명:
이름 유형 필수 설명
cityname 문자열 Y 도시 이름 또는 도시 ID, 예: "Suzhou", utf8 urlencode가 필요합니다.
dtype 문자열 N 반환 데이터 형식: json 또는 xml, 기본 json
format int N 향후 6일 예측에 대한 두 가지 반환 형식(향후), 1 또는 2, 기본값 1
키 string Y 신청한 키

HTML 부분 코드:

<!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 부분:

/*
* 1. 도시 이름 입력
* 2. 클릭 시 요청 보내기
* 3. 응답 성공 페이지를 렌더링합니다
* */
$('#search').on('click ',function(){
var city = $('#city').val()||'Beijing';
$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 = "날짜 기온 날씨 풍향"
$('#mufeng').html("

" + '현재: ' + sk.temp + '℃ , ' + sk.wind_direction + sk.wind_strength + ' , ' + '공기 습도' + sk .humidity + ' , 업데이트 시간' + sk.time + "

" + today.city + ' 오늘은 다음과 같습니다. ' + today.date_y + ' ' + today.week + ' , ' + today.temp + ' , ' + today.weather + ' , ' + today. wind + "

");
$('#future ').html("

" + '미래: ' + futur[0].온도+ '℃ , ' + 미래 [0].weather + futur[0].wind + ' , ' + ' , 업데이트 시간 ' + futur[0].week+futur[0].date + "

" + today.city + "

< /p>");
} });
});
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, '+')
}
})

위의 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.