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#调用存储过程带输出参数或返回值
    车辆售票坐位图
    C#操作SQL Server通用类
    Java基础知识总结
    Maven 安装与配置
    读取文件内容
    复制一个文件
    求1+2+3+...+n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)。
    输入一个递增的顺序排序的二维数组和一个整数,判断数组中是否含有该整数
    在由N个元素构成的集合S中,找出最小元素C,满足C=A-B,其中A,B是都集合S中的元素,没找到则返回-1
  • 原文地址:https://www.cnblogs.com/kudsu/p/9620726.html
Copyright © 2011-2022 走看看