ajax请求网络api
程序员文章站
2022-06-26 09:14:40
不啰嗦，直接上代码： 1、在浏览器输入网址：http://api.asilu.com/weather/?callback=getname&city=深圳 你会看到如下结果：他返回的是json数据 整理之后是这样的： 2、怎样才能获取上述json的数据呢？很简单： 3、效果图是这样的： 4、完毕。 ......
不啰嗦，直接上代码：
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>
3、效果图是这样的：
4、完毕。
下一篇： 我哥真的是欠打了