不啰嗦，直接上代码：

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

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

/** api.asilu.com **/getname({"city":"深圳","pm25":"","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":"","t":});

整理之后是这样的：

/** api.asilu.com **/

getname({

    "city": "深圳",

    "pm25": "",

    "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": "",

    "t":

});

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[].weather);

                }

            })

        })

    })

    </script>

</body>

</html>

3、效果图是这样的：

4、完毕。

ajax请求网络api的更多相关文章

  1. angularjs之$ajax请求

    AngularJS不仅仅只有双向绑定等等功能,还有发送Ajax请求的Api. 效果图: 请求的文件(data.php): <?php $data = [ '股市下跌', '清明小长假结束', ' ...

  2. HTTP请求封装：Ajax与RESTful API

    一.HTTP请求 HTTP即超文本传输协议,用以进行HTML 文件. 图片文件. 查询结果等的网络传输. 一个完整的HTTP请求包括:请求行.请求头.空行和请求数据(请求数据可以为空) HTTP1.1 ...

  3. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  4. 实战：ajax带参数请求slim API

    restful api 支持get,post,put,delete等方法,那么jquery客户端怎么去实现呢?涉及到跨域又怎么办? 很多时候需要传递一个token(api_key) 去识别用户身份,获 ...

  5. ajax GET和POST请求web api 的几种方式

    GET请求 1.无参数get请求 一般get请求有两种写法,一种是 $.get()   一种是$.ajax({type:"get"}), 我个人比较喜欢用后者. 下面例子主要是ge ...

  6. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  7. 使用js+Ajax请求API接口数据-带请求头方式

    C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...

  8. web api 解决Ajax请求跨域问题

    前端ajax请求接口时,经常出现跨域问题,当然了解决方法有很多种,比如: http://www.jb51.net/article/68424.htm 我本人恰好前后端都会一点,所以直接在接口端处理. ...

  9. APICloud ajax请求api数据问题

    云编译开启全局加密的情况下,请务必使用api.ajax,避免使用JQ等框架的ajax,否则将引起请求失败.官网API说明链接 还要就是要注意用$.ajax请求数据时会出现的同源策略问题.

随机推荐

  1. python 3编写贴吧图片下载软件（超简单）

    业余时间初学者作品,大佬勿喷,代码都很简单. py文件打包成exe教程:python3.7 打包成exe程序, 本程序体验下载地址:python编译的贴吧图片下载工具 先上效果图 启动后是这样的: 按 ...

  2. 【C语言程序】今天是祖国母亲的生日，特意编写一个小程序，为祖国母亲庆生~

    #include <stdio.h> #define N 80 int main(int argc, char *argv[]) { char a[N]; printf("Hel ...

  3. Mac_IntelliJ IDEA For Mac 快捷键

    Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Control ↩︎ Return/Enter ⌫ Delete ⌦ 向前删除键(Fn+Delete) ↑ 上箭头 ...

  4. SpringCloud中之Ribbon实现负载均衡

    之前都不能够理解负载均衡,不知道其怎么实现.现在学习了ribbon后,知道了可以开启多个服务实例,那么选择其中一个服务实例的策略就是负载均衡了,感觉还是很神奇的.

  5. 变量类型-List

    教程:一:列表的创建 List(列表) 是 Python 中使用最频繁的数据类型.列表中元素的类型可以不相同,数字,字符串甚至可以包含列表(所谓嵌套)    (1)List写在方括号之间,元素用逗号隔 ...

  6. PHP 可以获取客户端哪些访问信息---来自网页转载

    php是一种弱类型的程序语言,但是最web的 在程序语言中有系统全局函数: $_SERVER <?php echo "".$_SERVER['PHP_SELF'];#当前正在 ...

  7. c++第七周学习小结

    时间过得好快,一下就上了好多节c++的课了.我们现在新学了控制语句和函数,这对我来说有点难.老师上课的时候ppt过得有些快,自己会跟不上,所以以后上课前要预习充分.在经过同学和搜索引擎帮助后,我完成了 ...

  8. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  9. 关于python字符串基本操作

    python字符串基本操作,比如字符串的替换.删除.截取.复制.连接.分割等.都是一些关于字符串的一些方法.下面来列举一些,相信对学习python还是有些帮助的. 1.去除空格--strp(): &g ...

  10. Delphi 2010 新增功能之: IOUtils 单元(6): TPath(结构体) 的方法与属性

    以后路径相关的处理, 用 IOUtils.TPath 就很方便了. //较常用的方法: TPath.GetTempPath;                  {获取临时文件夹路径} TPath.Ge ...