ajax調取資料，搜尋天氣預報
阿新 • • 發佈：2018-12-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .span{ color: black; font-size: 16px; } .div_div{ color: blue; font-size: 20px; margin-left: 10px; } .div{ color: red; font-size: 20px; margin-left: 10px; } </style> </head> <body> <div id="div"> </div> <div id="box"> </div> <input type="text" id="ipt"> <button id="btn">點選按鈕</button> </body> </html> <script src="https://code.jquery.com/jquery-3.3.1.min.js "></script> <script> function fn(id){ $.ajax({ url:'https://www.apiopen.top/weatherApi?city='+id, type:'post', dataType:'json', success:function (data) { console.log(data.data); var arr=data.data; var str=data.data.yesterday; console.log(str); $('#div').append('<div class="div"><span class="span">城市地點為</span>'+arr.city+'</div>' +'<div class="div_div"><span class="span">天氣情況</span>'+arr.ganmao+'</div>'); $('#box').append('<div class="div"><span class="span">最高氣溫</span>'+str.high+'</div>'+ '<div class="div_div"><span class="span">最低氣溫</span>'+str.low+'</div>'+ '<div class="div_div"><span class="span">雲的厚度</span>'+str.type+'</div>'+ '<div class="div_div"><span class="span">空氣風向</span>'+str.fx+'</div>') } }) } $('#btn').click(function () { var va=$('#ipt').val(); fn(va); }); $.ajax({ url:'http://localhost:3000/item/logo', type:'get ', dataType:'json', success:function(data){ console.log(data) for(i in data){ $('#div').append('<div></div>') } } }) </script>