转载自:
https://www.cnblogs.com/kudsu/p/9620726.html
啰嗦,直接上代码:
1、在浏览器输入网址:http://api.asilu.com/weather/?callback=getname&city=深圳
你会看到如下结果:他返回的是json数据
/** api.asilu.com **/getname({"city":"深圳","pm25":"28","weather":[{"date":"周一 09月10日","icon1":"day\/duoyun","icon2":"night\/duoyun","weather":"多云","wind":"无持续风向微风","temp":"31 ~ 25℃"},{"date":"周二","icon1":"day\/duoyun","icon2":"night\/duoyun","weather":"多云","wind":"无持续风向微风","temp":"31 ~ 27℃"},{"date":"周三","icon1":"day\/leizhenyu","icon2":"night\/leizhenyu","weather":"雷阵雨","wind":"东风4-5级","temp":"31 ~ 26℃"},{"date":"周四","icon1":"day\/zhenyu","icon2":"night\/zhenyu","weather":"阵雨","wind":"东风3-4级","temp":"30 ~ 26℃"}],"date":"2018-09-10","id":"101280601","t":1536508800});
整理之后是这样的:
/** api.asilu.com **/ getname({ "city": "深圳", "pm25": "28", "weather": [{ "date": "周一 09月10日", "icon1": "day\/duoyun", "icon2": "night\/duoyun", "weather": "多云", "wind": "无持续风向微风", "temp": "31 ~ 25℃" }, { "date": "周二", "icon1": "day\/duoyun", "icon2": "night\/duoyun", "weather": "多云", "wind": "无持续风向微风", "temp": "31 ~ 27℃" }, { "date": "周三", "icon1": "day\/leizhenyu", "icon2": "night\/leizhenyu", "weather": "雷阵雨", "wind": "东风4-5级", "temp": "31 ~ 26℃" }, { "date": "周四", "icon1": "day\/zhenyu", "icon2": "night\/zhenyu", "weather": "阵雨", "wind": "东风3-4级", "temp": "30 ~ 26℃" }], "date": "2018-09-10", "id": "101280601", "t": 1536508800 });
2、怎样才能获取上述json的数据呢?很简单:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <h1>天气查询</h1> <input type="text" placeholder="请输出你的地址" id="tel"/> <button id="ajax">确定</button> <p><span id="reslut"></span></p> <script type="text/javascript" src="jquery-3.3.1/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $(‘#ajax‘).on(‘click‘,function(){ var $telValue=$(‘#tel‘).val(); if($telValue=="") { alert(‘不能为空!‘); return; } $.ajax({ type: ‘GET‘, dataType:‘jsonp‘, url: ‘http://api.asilu.com/weather/?callback=getname&city=‘+$telValue, success: function(data){ var reslutData=data; console.log(reslutData); $(‘#reslut‘).text("你查询的是:"+reslutData.city+","+"明天的天气是:"+reslutData.weather[0].weather); } }) }) }) </script> </body> </html>