day31-Ajax

一、Ajax获取数据

1.Ajax

HTML: Hyper-Text Markup Language 。
XML: eXtensible Markup Language 。
XML最为重要的用途是在两个异构的系统之间交换数据 。
现在这项功能基本上被JSON和YAML格式替代了 。
Ajax: Asynchronous JavaScript and XML 。
通过JavaScript代码向服务器发起异步请求并获得数据 。
异步请求：在不中断用户体验的前提下向服务器发出请求 。
获得数据后可以通过DOM操作对页面进行局部刷新加载服务器返回的数据。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax获取数据</title>
    </head>
    <body>
         <button id="ok">换一组</button>
         <div id="container"></div>
         
         <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
         <script type="text/javascript">
            $(function(){
                $('#ok').on('click',function(){
                    var url = 'http://api.tianapi.com/meinv/?key=b8a234b84684732e96dd79e512b685f8&num=10';
                    $.getJSON(url, function(jsonObj){
                        $('#container').empty();
                        $.each(jsonObj.newslist, function(index,elem) {
                            $('#container').append(
                                $('<img>').attr('width','400').attr('height','550').attr('src',elem.picUrl)
                            );
                        });
                    });
                });
            });
         </script>
    </body>
</html>

2.周公解梦

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>周公解梦</title>
        <style type="text/css">
            #search{
                width: 740px;
                margin: 0 auto;
                text-align: center;
                margin-top: 150px;
            }
            
            #keyWord{
                display: inline-block;
                width: 520px;
                height: 36px;
                font: 36px/36px arial;
                text-align: center;
                vertical-align: middle;
                border: none;
                outline: none;
                border-bottom: 1px dotted darkgray;
            }
            
            
            /*#search input[type=button] -> 属性选择器*/
            #button1{
                width: 80px;
                height: 36px;
                font:20px/36px arial;
                border: none;
                color: white;
                background-color: green;
                vertical-align: middle;
            }
            
            #result{
                width: 640px;
                margin: 0 auto;
                font: 20px/20px arial;
            }
        </style>
    </head>
    <body>
        
        <div id="search">
            <input type="text" id="keyWord" value="" placeholder="请输入关键字"/>
            <input type="button" id="button1" value="查询" />
        </div>
        <hr>
        <p id="result"></p>
        
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //将URL不能识别的字符转化成能够识别的%编码
            //encodeURIComponent(str,'utf-8');
            //将%编码的数据转化成普通的字符
            //decodeURIComponent(str,'utf-8');
            
            $(function(){
                $('#button1').on('click',function(){
                    var keyWords = $('#keyWord').val().trim();
                    if(keyWords.length > 0){
                        $('#result').empty();
                        $.ajax({
                            'url': 'http://api.tianapi.com/txapi/dream/',
                            'type': 'get',
                            'data': {
                                'key': 'b8a234b84684732e96dd79e512b685f8',
                                'word': keyWords
                            },
                            'dataType': 'json',
                            'success': function(jsonObj){
                                if(jsonObj.code == '250'){
                                    $('#result').text(jsonObj.msg);
                                }else{
                                    $('#result').text(jsonObj.newslist[0].result);
                                }
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>

测试结果

1.PNG

3.购物车

代码


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>购物车</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            body {
                width: 960px;
                margin: 20px auto;
            }
            #cart {
                margin: 0 auto;
                width: 850px;
            }
            #cart-header {
                height: 40px;
                background-color: lightgray;
                margin-bottom: 20px;
            }
            #cart-header div {
                line-height: 40px;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .w110 {
                width: 100px;
            }
            .ml10 {
                margin-left: 10px;
            }
            .w120 {
                width: 120px;
            }
            .w250 {
                width: 250px;
            }
            .center {
                text-align: center;
            }
            .w20 {
                width: 20px;
            }
            .w90 {
                width: 90px;
            }
            .clear {
                clear: both;
            }
            #cart-items>div {
                height: 100px;
            }
            #cart-items>div>div {
                line-height: 100px;
            }
            .w250 span {
                display: inline-block;
                font-size: 12px;
                line-height: 16px !important;
            }
            .single-item {
                border-bottom: 1px solid gray;
            }
            .small-button {
                display: inline-block;
                width: 20px;
                height: 20px;
                border: none;
            }
            .big-button {
                color: white;
                background-color: red;
                display: inline-block;
                width: 120px;
                height: 40px;
                border: none;
                font-size: 22px;
            }
            #totalCount, #totalPrice {
                color: red;
            }
            #totalPrice {
                font: bolder 20px Arial;
                display: inline-block;
                width: 150px;
            }
            #cart a {
                text-decoration: none;
            }
            #cart a:link, #cart a:visited, #cart a:active {
                color: gray;
            }
        </style>
    </head>
    <body>
        <div id="cart">
            <div id="cart-header">
                <div class="left w110 ml10">
                    <input id="selectAll" type="checkbox" >
                    <label for="selectAll">全选</label>
                </div>
                <div class="left w250">商品</div>
                <div class="left w120 center">单价</div>
                <div class="left w120 center">数量</div>
                <div class="left w120 center">小计</div>
                <div class="left w120 center">操作</div>
            </div>
            <div id="cart-items">
                <div class="clearSingle-item">
                    <div class="left w20 ml10">
                        <input class="selectOne" name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a1.jpg">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span id="price1" class="price">138.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input id="input1" class="center-count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>138.00</span></div>
                    <div class="left w120 center">
                        <a class="del" href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input class="selectOne" name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a2.jpg">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span id="price2" class="price">128.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input id="input2" class="center-count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>128.00</span></div>
                    <div class="left w120 center">
                        <a class="del" href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input class="selectOne" name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a3.jpg">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span id="price3" class="price">99.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input id="input3" class="center-count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;99.00</div>
                    <div class="left w120 center">
                        <a class="del" href="javascript:void(0);">删除</a>
                    </div>
                </div>
            </div>
            <div id="cart-footer">
                <div class="clear left">
                    <a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
                </div>
                <div class="right">
                    <span>总共选中了<span id="totalCount">0</span>件商品</span>
                    <span>总计: <span id="totalPrice">&yen;<span id="price">0.00</span></span>
                    <button id="pay" class="big-button">去结算</button>
                </div>
            </div>
        </div>
        
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            $(function(){
                //全选功能
                var checkBoxs = $('.selectOne');
                $.each(checkBoxs, function(index,elem1) {
                    $(elem1).on('click',function(){
                        $.each(checkBoxs, function(index,elem2) {
                            if($(elem2).is(':checked') == false){
                                $('#selectAll').prop({
                                    'checked' : false
                                });
                                return false
                            }
                        $('#selectAll').prop({
                            'checked' : true
                        });
                        });
                    });
                });
                $.each(checkBoxs, function(index,elem) {
                        if($(elem).is(':checked') == false){
                            $('#selectAll').prop({
                                'checked' : false
                            });
                        }else{
                            $('#selectAll').prop({
                                'checked' : true
                            });
                        }
                });
                $('#selectAll').on('click',function(){
                    var allTag = ($('#selectAll').is(':checked'));
                    if(allTag){
                        $.each(checkBoxs, function(index,elem) {
                            $(elem).prop({
                                'checked' : true
                            });
                        });
                    }else{
                        $.each(checkBoxs, function(index,elem) {
                            $(elem).prop({
                                'checked' : false
                            });
                        });
                    }
                });             
            });
            
            //商品件数和总计
            $('#input1').bind('input propertychange',function(evt){
                if($('#input1').val() > 200){
                    $('#input1').val(200);
                }else if($('#input1').val() <= 0){
                    $('#input1').val(0);
                }
            });
            
            $("#input2").bind("input propertychange",function(evt){
                if($('#input1').val() > 200){
                    $('#input1').val(200);
                }else if($('#input1').val() <= 0){
                    $('#input1').val(0);
                }
            });
            
            $("#input3").bind("input propertychange",function(evt){
                if($('#input1').val() > 200){
                    $('#input1').val(200);
                }else if($('#input1').val() <= 0){
                    $('#input1').val(0);
                }
            });

            $('.small-button').on('click',function(evt){
                var num = parseInt($(evt.target).parent().children('input').val());
                    if($(evt.target).text() == '+'){
                        if(num >= 200){
                            $(evt.target).parent().children('input').val(200);
                        }else{
                            $(evt.target).parent().children('input').val(num+1);
                        }
                    }else{
                        if(num<=0){
                            $(evt.target).parent().children('input').val(0);
                        }else{
                            $(evt.target).parent().children('input').val(num-1);
                        }
                    }
            });
            
            
            $('.selectOne').on('click',function(evt){
                var input = $(evt.target).parent().parent().find('input')[1];
                var price = $(evt.target).parent().parent().find('.price');
                if($(evt.target).is(':checked') == true){
                    var total = parseInt($('#totalCount').text()) + parseInt($(input).val())
                    var totalPrice = parseFloat($('#price').text()) + parseInt($(input).val()) * parseFloat($(price).text());
                    $('#price').text(totalPrice);
                    $('#totalCount').text(total);
                }else{
                    var total = parseInt($('#totalCount').text()) - parseInt($(input).val())
                    var totalPrice = parseFloat($('#price').text()) - parseInt($(input).val()) * parseFloat($(price).text());
                    $('#price').text(totalPrice);
                    $('#totalCount').text(total);
                    
                }
            });
            
            $('#selectAll').on('click',function(evt){
                var total = 0;
                totalPrice = 0;
                var price = $(evt.target).parent().parent().find('.price');
                if($(evt.target).is(':checked') == true){
                    $.each($('.center-count'),function(index,elem){
                        total = total + parseInt($(elem).val());
                        totalPrice = $('#input1').val() * parseFloat($('#price1').text()) + $('#input2').val() * parseFloat($('#price2').text()) + $('#input3').val() * parseFloat($('#price3').text());
                    });
                    $('#totalCount').text(total);
                    $('#price').text(totalPrice);
                }else{
                    $('#totalCount').text(0);
                    $('#price').text(0.00);
                }
            });
            
            //删除选中商品
            $('#clearSelected').on('click',function(){
                $.each($('.selectOne'),function(index,elem){
                    if($(elem).is(':checked') == true){
                        var totalPrice = parseFloat($('#price').text()) - $(elem).parent().parent().find('.center-count').val() * $(elem).parent().parent().find('.price').text();
                        var totalCount = $('#totalCount').text() - $(elem).parent().parent().find('.center-count').val();
                        $('#totalCount').text(totalCount);
                        $('#price').text(totalPrice);
                        $(elem).parent().parent().remove()  
                    }
                })
            });
            
            //删除整行
            $('.del').on('click',function(evt){
                var flag = window.confirm('确定要删除该商品吗？');
                if(flag){
                    $(evt.target).parent().parent().remove();
                }
            });
            
        </script>
    </body>
</html>

测试结果

2.PNG
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Framework 5 MVC 官方手册译文
    Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架，建立于...
    Hsinwong阅读 22,600评论 1赞 92
  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3赞 119
  • 孔庙断想
    多少寒士，多少梦想，从这里发源。夕照把孔庙的影子拉长，拉扁。 窄而且小的泮池，在拱肩缩背的塞士心中，是遥远的彼岸。...
    倚剑白云天阅读 145评论 0赞 1
  • 中国古典学术专著将有选择标准
    中国古典学术专著遴选标准研讨会近日在北京召开，中国新闻出版新闻记者在会议上获悉，中国古典学术专著（推荐稿）的遴选标...
    juzhang0768阅读 311评论 0赞 0
  • 李欣频：用阅读栽培自己
    摘自李欣频《十四堂人生创意课》 建立自己的阅读路径 至于怎么选书，你们可以先从自己有兴趣的开始读起，然后延伸阅读，...
    齐言楚羽阅读 987评论 0赞 8