ajax请求网络api

布满荆棘的人生 2021-10-15 14:39 221阅读 0赞

转载自：

https://www.cnblogs.com/kudsu/p/9620726.html

啰嗦，直接上代码：

1、在浏览器输入网址：http://api.asilu.com/weather/?callback=getname&city=深圳

你会看到如下结果：他返回的是json数据

整理之后是这样的：

![复制代码][copycode.gif]

/** 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
    });

![复制代码][copycode.gif]

2、怎样才能获取上述json的数据呢？很简单：

![复制代码][copycode.gif]

<!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>

![复制代码][copycode.gif]

转载于:https://www.cnblogs.com/gudaozi/p/10988148.html

[copycode.gif]: /images/20211015/a5369f48895b4450a8534820a5b1aa37.png