Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use jQuery ajax to achieve weather forecast". In daily operation, I believe many people have doubts about how to use jQuery ajax to achieve weather forecast. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use jQuery ajax to achieve weather forecast". Next, please follow the editor to study!

1 2 3 4 5 Weather 6 7 8 9 latest Weather 10

City:

eleven

Date:

twelve

Weather:

thirteen

Current temperature:

fourteen

Wind direction:

fifteen

Maximum temperature:

sixteen

Minimum temperature:

seventeen

Warm reminder:

Weather forecast for the next 7 days 19 20 21 22 date 23 Weather 24 current temperature 25 maximum temperature 26 most Low temperature 27 Wind Direction 28 Wind 29 30 31 32 33 34 35 36 37 38 $(document) .ready (function () {39 $.ajax ({40 url: 'https://www.tianqiapi.com/api/?version=v1&appid=1001&appsecret=5578', 41 type: 'get',42 data: {43 city: "Beijing" 44}, 45 dataType:' json',46 error: function (resp, status) {47 console.log ('request failed:', status Resp) 48}, 49 success: function (resp, status) {50 var wCity = resp.city;51 var wDate = resp.data [0] .date; 52 var wWea = resp.data [0] .wea; 53 var wTem = resp.data [0] .tem 54 var wWin = resp.data [0] .win [0]; 55 var wTemMax = resp.data [0] .tem1; 56 var wTemMin = resp.data [0] .tem2; 57 var wAirTips = resp.data [0] .air _ tips 58 $('# app p:nth-child (2) span') .html (wCity); 59 $('# app p:nth-child (3) span') .html (wDate); 60 $('# app p:nth-child (4) span') .html (wWea) 61 $('# app p:nth-child (5) span') .html (wTem); 62 $('# app p:nth-child (6) span') .html (wWin); 63 $('# app p:nth-child (7) span') .html (wTemMax) 64 $('# app p:nth-child (8) span') .html (wTemMin); 65 $('# app p:nth-child (9) span') .html (wAirTips); 66 $("# detail tbody") .empty (); 67 for (var I = 0; I < 7) ) {68 var forword_day = "" + 69 resp.data [I] .day + "+ 70 resp.data.wea +" + "+ 71 resp.data.tem +" + 72 Resp.data.tem1 + "" + 73 resp.data.tem2 + "" + 74 resp.data.win [0] + "" + 75 resp.data.win _ speed + "" + 76 "" 77 $("# detail tbody") .append (forword_day); 78} 79} 80}) 81}) 82 83 84

At this point, the study on "how to use jQuery ajax to achieve weather forecast" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.