一、免费API调用：
免费天气api接口 JS调用示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>天气API</title> </head> <body> <h3>天气</h3> <ul id="box"></ul> <h3>小时天气</h3> <ul id="hours"></ul> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script> $.ajax({ type: \'GET\', url: \'https://www.tianqiapi.com/api/\', data: \'version=v1&city=济南\', dataType: \'JSON\', error: function () { alert(\'网络错误\'); }, success: function (res) { $(\'#box\').append(\'<li>City: \' + res.city + \'</li>\'); $(\'#box\').append(\'<li>Weather: \' + res.data[0].wea + \'</li>\'); $(\'#box\').append(\'<li>Tips: \' + res.data[0].air_tips + \'</li>\'); // 遍历数组 for (var i = 0; i < res.data[0].hours.length; i++) { $(\'#hours\').append(\'<li>\' + (i + 1) + \': 时间: \' + res.data[0].hours[i].day + \' 气温: \' + res.data[0].hours[i].tem + \' </li >\'); } } }); </script> </body> </html>