Ajax는 국가 일기 예보의 API 데이터를 얻습니다.-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-04-03 11:15:36

원래의

3441명이 탐색했습니다.

이번에는 국가 날씨를 얻기 위한 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 부분 코드:

<!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.响应成功渲染页面
* */
$(&#39;#search&#39;).on(&#39;click&#39;,function(){
var city = $(&#39;#city&#39;).val()||&#39;北京&#39;;
$citycode=urlencode(city);
url=&#39;http://v.juhe.cn/weather/index?format=2&cityname=&#39;+$citycode+&#39;&key=c82727e986a4f6cfc6ba1984f1f9183a&#39;;
$.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의 다른 관련 기사에 주목하세요. 중국사이트!