Ajax 도시 명 으로 데이터 획득(전국 일기예보 API)
3301 단어 일기예보
취 합 데이터 전국 일기예보 인터페이스: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 테스트 도구
요청 매개 변수 설명:
이름 형식 필수 설명
city name string Y 도시 이름 또는 도시 ID,예 를 들 어"소주",utf 8 urlencode 가 필요 합 니 다.
dtype string N 반환 데이터 형식:json 또는 xml,기본 json
format int N 앞으로 6 일 예보(future)두 가지 반환 형식,1 또는 2,기본 값 1
key string Y 네가 신청 한 key
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">
<div id="mf_weather">
<script src="w.js"></script>
<button id="search"> </button>
<input id="city" type="text" value="tbody">
<div class="ctn">
<div id="mufeng">
</div>
<div id="future"></div>
</div>
</html>/*
*1.도시 이름 입력
*2,클릭 시 요청 발송
*3.렌 더 링 성공 페이지 응답
* */
$('#search').on('click',function(){
var city=$('\#city').val()|'북경';
$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('p'+'현재:'+sk.temp+'℃,'+sk.winddirection + sk.wind_strength+','+'공기 습도'+sk.humidity+',업데이트 시간'+sk.time+'
'+today.city+'오늘 은:'+today.datey + ' ' + today.week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "
");$('\#future').html('p>'+'미래:'+futur[0].temperature+'℃,'+futur[0].weather+futur[0].wind+','+',업데이트 시간'+futur[0].date+'");
} });
});
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, '+');
}
})
위 에서 말 한 것 은 편집장 이 소개 한 Ajax 가 도시 명 을 통 해 데이터(전국 일기예보 API)를 얻 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
좋은 웹페이지 즐겨찾기
