Ajax는 국가 일기 예보의 API 데이터를 얻습니다.

이번에는 국가 날씨를 얻기 위한 Ajax의 API 데이터를 가져오겠습니다. Ajax가 국가 일기예보 API 데이터를 얻기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

미리보기 이미지(비교적 간단하고 대략적)

집계자료 전국 일기예보 인터페이스: 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
key 문자열 Y 신청한 키

HTML 부분 코드:

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
b0472fae589efacfdc9167ddd7cd36f5
b2386ffb911b14667cb8f0f91ea547a7天气预报6e916e0f7d1e588d4f442bf645aedb2f
b9197df398584b98b2410e5b164be7af2cacc6d41bbb37262a98f745aa00fbf0
00df4a35b0411efd7658664b9edd1375
da1e4ed9b166c1457fd597723770335e
d4f5983c77987d0ae0324e24bb5ff6c72cacc6d41bbb37262a98f745aa00fbf0
e3eaba810eafb87286c1217c7ba255b9天气查询65281c5ac262bf6d81768915a4a77ac0
ed587b6614a359512e6703c59df9f2c0
29009b77e757bc1f1ec679e658842388
2ed2ef88bdf8d39fb1161be07e63a70a
94b3e26ee717c64999d7867364b1b4a3
67b71a8c322b70225f9afed221ece6b594b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3 
73a6ac4ed44ffec12cee46588e518a5e

JavaScript 부분:

/*
* 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 = "日期温度天气风向";
$(&#39;#mufeng&#39;).html("<p>" + &#39;当前: &#39; + sk.temp + &#39;℃ , &#39; + sk.wind_direction + sk.wind_strength + &#39; , &#39; + &#39;空气湿度&#39; + sk.humidity + &#39; , 更新时间&#39; + sk.time + "</p><p style=&#39;
padding-bottom
: 10px;&#39;>" + today.city + &#39; 今天是: &#39; + today.date_y + &#39; &#39; + today.week + &#39; , &#39; + today.temperature + &#39; , &#39; + today.weather + &#39; , &#39; + today.wind + "<p></p>");
$(&#39;#future&#39;).html("<p>" + &#39;未来: &#39; + futur[0].temperature+ &#39;℃ , &#39; + futur[0].weather + futur[0].wind + &#39; , &#39; + &#39; , 更新时间&#39; + futur[0].week+futur[0].date + "</p><p style=&#39;padding-bottom: 10px;&#39;>" + today.city + "<p></p>");
} });
});
function urlencode (str) { 
str = (str + &#39;&#39;).toString(); 
return encodeURIComponent(str).replace(/!/g, &#39;%21&#39;).replace(/&#39;/g, &#39;%27&#39;).replace(/\(/g, &#39;%28&#39;). 
replace(/\)/g, &#39;%29&#39;).replace(/\*/g, &#39;%2A&#39;).replace(/%20/g, &#39;+&#39;); 
} 
})

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사에 주목하세요. 중국사이트!

추천 자료:

Ajax가 txt를 읽고 해당 내용을 페이지에 표시하는 방법

Ajax가 jSon을 탐색하여 데이터를 수정하고 삭제합니다

위 내용은 Ajax는 국가 일기 예보의 API 데이터를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!