Ajax-数据异步交互

1.Ajax简介

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.AJAX 实例

  • 查询提示
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>查询访问</title>

    <!-- 

    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&cb=jQuery110206545585568528622_1499224165848&_=1499224165856
     -->

    <style type="text/css">
        *{margin:0px;padding: 0px;}
        #container{width:800px;margin:auto;margin-top:10px;}
        input[id="keywords"]{width: 500px;height: 40px;border:solid 2px #cecece;font-size: 22px;line-height: 40px;color:#888;padding-left: 10px;}   

        #sug{width:512px;list-style: none;border:solid 1px #ccc;}
        #sug li{height: 30px;background:#fcfcfc;line-height:30px;font-size:18px}

    </style>
    <script type="text/javascript" src="../jquery-1.12.4.js"></script>

</head>
<body>
    <div id="container">
        <div>
            <input type="text" id="keywords" placeholder="请输入关键词">
        </div>
        <ul id="sug">
            <!-- <li>建议搜索的关键词</li> -->
        </ul>
    </div>

    <script>
        // 获取输入框
        var $kw = $("#keywords");

        // 添加键盘按键抬起事件
        $kw.keyup(function(){
            // 获取输入框中的输入
            var $value = $kw.val();

            // 调用函数，获取数据
            $.ajax({
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?",
                type:"get",
                data:{wd:$value},
                dataType:"jsonp",
                success:function(msg){
                    // 当url接口访问成功的时候，自动调用success对应的函数，接口返回的数据会自动存放在函数的参数data中
                    console.log(msg.s);
                    // 将输入输出到页面中;dom操作
                    var _sug = msg.s;
                    // 清空原来的url标签;
                    $("#sug").empty();

                    for (var i = 0;i< _sug.length;i++){
                        // 创建一个li标签
                        var $li = $("<li>")
                        // 标签中添加文本数据
                        $li.text(_sug[i]);
                        // 将li标签，添加到页面中
                        $("#sug").append($li);


                    }
                }
            }); 
        });

    </script>

</body>
</html>


<!--    dataType:"jsonp",
        同源策略：web规范了只有相同源头（域名）的数据才可以互相访问
        同源策略是为了数据的安全性，而设置的一种网络数据访问限制

        跨域：从不同的域名下访问指定的数据 -->

效果展示：

查询提示
  • 天气预报查询地址
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>天气预报</title>
    <style>
        *{margin:0px;padding:0px;}
        #container{width:800px;margin:auto;font-size: 20px;font-weight: bolder;}
        input[id="city"]{width:500px;height:35px;border:solid 2px #cecece;font-size:22px;line-height:35px;color:#888;padding-left:10px; margin:10px;}
        #show{display:block;width: 600px;height: 300px;border: solid 2px #888;margin: 10px auto; list-style: none;padding: 10px;border-radius: 8px;box-shadow: 10px 10px 5px #888}

    </style>
    <script type="text/javascript" src="../jquery-1.12.4.js"></script>
</head>
<body>
    <div id="container">
        <div>
            请输入城市名称：
            <input type="text" id="city" placeholder="请输入想查询的地区">
        </div>
        <ul id="show">
            <li>天气信息</li>
        </ul>
        
    </div>

 <script>
        // 获取需要的标签对象
        var _city = $("#city");
        var _show = $("#show");

        // 添加事件处理
        _city.blur(function(){
            // 获取输入框中的输入数据
            var $value = _city.val();

            _show.empty();
            // 调用函数，获取数据
            $.ajax({
                url:"http://wthrcdn.etouch.cn/weather_mini?callback=?",
                type:"get",
                data:{city:$value},
                dataType:"jsonp",
                success:function(msg){
                    // 当url接口访问成功的时候，自动调用success对应的函数，接口返回的数据会自动存放在函数的参数data中
                    console.log(msg);
                    // 获取城市数据，展示到页面中
                    var $city = $("<li>");
                    $city.text(msg.data.city + "天气预报信息：");

                    // 获取今天温度数据
                    var $wd = $("<li>");
                    $wd.text("今天温度："+ msg.data.wendu);

                    // 获取今天感冒指数数据
                    var $gm = $("<li>");
                    $gm.text("温馨提示："+ msg.data.ganmao);

                    // 今天天气预报
                    var $today = $("<li>");

                    var $date = $("<span>").text("日期：" + msg.data.forecast[0].date)
                    var $type = $("<span>").text("；今天天气:" + msg.data.forecast[0].type)
                    var $high = $("<span>").text("；最高气温:" + msg.data.forecast[0].high)
                    var $low = $("<span>").text("；最低气温:" + msg.data.forecast[0].low)
                    var $fl = $("<span>").text("；风力:" + msg.data.forecast[0].fengli)
                    var $fx = $("<span>").text("；风向:" + msg.data.forecast[0].fengxiang)

                    $today.append($date).append($type).append($high).append($low).append($fl).append($fx);

                    _show.append($city).append($wd).append($gm).append($today);
                },  
                error:function(){
                    console.log("运行错误...");             
                }
            }); 
        });

    </script>
</body>
</html>

效果展示：

天气查询
  • 快递单号查询接口
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>快递信息查询</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #container{width: 800px;margin: 15px auto;font-size: 20px;font-weight: bolder;}
            select[id="company"]{width: 200px;height: 30px;font-size: 18px;font-family: "微软雅黑";border-radius: 5px;}
            #wb{float: left;}
            input[id="postid"]{margin:10px auto;width: 200px;height: 20px;font-size: 14px;font-family: "微软雅黑";border-radius: 3px;}
            button[id="cx"]{display: block;width: 56px;height: 26px;background-color:#388bff;color:white;margin: 8px 380px;}
            ul[id="show"]{list-style: none;width: 500px;height:500px;border:solid 2px #888; border-radius: 8px; }
            #container ul li p{padding:15px;width:480px;
                min-height: 50px;font-size:14px;}

        </style>

        <script type="text/javascript" src="../jquery-1.12.4.js">
        </script>

    </head>
    <body>
        <div id="container">
            <div>
                <label for="company">快递公司名称</label>
                <select id="company" name="address">
                        <option value="shunfeng">顺丰速运</option>
                        <option value="shentong">申通快递</option>
                        <option value="ems">EMS</option>
                        <option value="yuantong">圆通速递</option>
                        <option value="zhongtong">中通快递</option>
                        <option value="tiantian">天天快递</option>
                        <option value="huitongkuaidi">汇通快递</option>
                        <option value="yunda">韵达速递</option>
                        <option value="quanfengkuaidi">全峰快递</option>
                        <option value="debangwuliu">德邦</option>
                        <option value="zhaijisong">宅急送</option>
                </select>
            </div>
            <div id="wb">
                <label for="post">输入快递单号</label>
                <input type="text" id="postid">
            </div>
            <div>
                <button id="cx">查询</button>
            </div>

            <ul id="show">
                <li>
                    <i></i>
                    <p>物流信息</p>
                </li>
            </ul>
            <div style="clear:both;"></div>
        </div>

        <script>
            // 获取标签对象：快递公司
            var $selector=$("#company");
            // 获取快递单号
            var $postid=$("#postid");
            // 查询
            var $cx=$("#cx");

            // 给查询按钮添加点击事件
            $cx.click(function(){
                // 获取需要的数据
                var $company = $selector.val();
                var $value = $postid.val();

                // ajax 获取数据
                $.ajax({
                    url:"https://sp0.baidu.com/9_Q4sjW91Qh3otqbppnN2DJv/pae/channel/data/asyncqury?cb=?",
                    type:"get",
                    data:{com:$company,nu:$value,appid:4001},
                    dataType:"json",
                    success:function(msg){
                        // 清空历史消息
                        $("#show").empty();

                        // 获取接口返回的数据
                        console.log(msg);
                        var $info = msg.data.info.context;

                        // 循环遍历数据
                        for(var i = 0; i <$info.length;i++){
                            // 获取每一笔的时间信息
                            var $time = $info[i].time;
                            $time = getTimeStr($time);

                            // 获取每一笔的快递信息
                            var $desc = $info[i].desc;

                            // 创建标签，添加到页面中
                            var $msg = $("<p>").text($time + ":" + $desc);
                            var $i = $("<i>");

                            var $kd = $("<li>");
                            $kd.append($i).append($msg);
                            // 添加到页面中
                            $("#show").append($kd);
                        } 


                    },
                    error:function(){
                        console.log("系统繁忙，查询失败");
                    }
                });
            });

            // 获取时间字符串
            function getTimeStr(dt){
                var _date = new Date(parseInt(dt*1000));
                return _date.getFullYear() + "-" + (_date.getMonth() + 1) + "-" + _date.getDate() + " " + _date.getHours() + ":" + _date.getMinutes() + ":" + _date.getSeconds();


            }
        </script>


    </body>
    </html>

效果展示

快递查询
推荐几个网站

jQuery插件库：JS特效,网页特效,以及各种html5,css3动画和效果

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

阿里巴巴矢量图标库：Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

Swiper(Swiper master)：是目前应用较广泛的移动端网页触摸内容滑动js插件。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,591评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,448评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,823评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,204评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,228评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,190评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,078评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,923评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,334评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,428评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,022评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2赞 354

推荐阅读更多精彩内容