zoukankan      html  css  js  c++  java
  • 【学习笔记】ajax请求网络api

    不啰嗦,直接上代码:

    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、完毕。

  • 相关阅读:
    C# HTTP
    Iframe的应用
    亚马逊S3下载上传文件
    ubuntu14.0.4.3 devstack 安装openstack
    转--脉络清晰的BP神经网络讲解,赞
    转载:稀疏矩阵存储格式总结+存储效率对比:COO,CSR,DIA,ELL,HYB
    Python 元组
    pyhon 模块与库
    开源推荐简介
    转载--PayPal高级工程总监:读完这100篇论文 就能成大数据高手
  • 原文地址:https://www.cnblogs.com/kudsu/p/9620726.html
Copyright © 2011-2022 走看看