Ajax-数据异步交互

发表: 2017-10-13 浏览: 2391

JavaScript

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插件。

0 个评论

要回复文章请先登录或注册