Ajax는 도시 이름으로 데이터를 얻습니다.
- 亚连원래의
- 2018-05-23 11:24:271799검색
이 글에서는 도시 이름을 통해 데이터를 얻는 국가 일기예보 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("e388a4556c0f65e1904146cc1a846bee" + '현재: ' + sk.temp + '℃ , ' + sk.wind_direction + sk.wind_strength + ' , ' + '공기 습도' + sk .humidity + ' , 업데이트 시간' + sk.time + "94b3e26ee717c64999d7867364b1b4a35f538f825662c67bce0bd5dea6f31688" + today.city + ' 오늘은 다음과 같습니다. ' + today.date_y + ' ' + today.week + ' , ' + today.temp + ' , ' + today.weather + ' , ' + today. wind + "e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3");
$('#future ').html("e388a4556c0f65e1904146cc1a846bee" + '미래: ' + futur[0].온도+ '℃ , ' + 미래 [0].weather + futur[0].wind + ' , ' + ' , 업데이트 시간 ' + futur[0].week+futur[0].date + "94b3e26ee717c64999d7867364b1b4a30534a88a299155cb5c3c20cc2b5c1437" + today.city + "e388a4556c0f65e1904146cc1a846bee6fb279ad3fd4344cbdd93aac6ad173ac");
} });
});
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를 구현하여 드롭다운 목록에 동적으로 데이터를 추가하는 방법
Ajax 교차 도메인 요청 시 파서 오류 오류를 완벽하게 해결
ajax가 휴대폰 번호를 데이터베이스에 제출합니다. 확인을 위해 상태 값을 반환합니다
위 내용은 Ajax는 도시 이름으로 데이터를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!