ajax之换一换的功能实现

作者: amCow | 来源:发表于2017-02-22 23:02 被阅读122次

ajax之换一换的功能实现
实现换床位号的功能。
vue实现换主题\皮肤功能
Android实现头像上传
13.项目实战：Header组件开发（五）
社群裂变增长
换一换
表格排序（小综合的例子）
换，换，换
亲密关系

介绍：
ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

换一换功能需求：
1）有一组元素
2）点击后更新元素内容
3）不创造新元素

下面进行思路解析：
1：静态布局一组li元素，用于接收后台传送的数据内容；
2：点击事件发生后，用jquey的ajax数据交互
3：更新内容

一、静态页面搭建

<style>
    a{text-decoration: none;}
    span{margin-left:10px;}
</style>
<body>
    <input type="button" value="换一换">
    <ul id="box">
        <!-- <li><a href="#">热点1</a><span>10</span></li>
        <li><a href="#">热点2</a><span>10</span></li>
        <li><a href="#">热点3</a><span>10</span></li> -->
    </ul>
</body>

二、js代码书写
整体思路：
点击事件后在ajax中对成功传入的r，进行数组排序，按照arr.sort()由于返回值出现正负的特性，在利用0.5-Math.random() 随机数产生的正负，进行不规律传递取数据，但尚未解决上次出现的不再出现。。。

<script src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(()=>{
            $('input').click(()=>{
                $.ajax({
                    url:'weibo.data',
                    cache:false,
                    dataType:'json',
                    success:r=>{
                        $('#box').html('');
                        r.sort(()=>{
                            return 0.5-Math.random();
                        });
                        /*$.each(r,(i,v)=>{
                            if(i<3){
                                $(`<li><a href="${v.url}">${v.title}</a><span>${v.readCount}</span></li>`).appendTo('#box');
                            }else{
                                return false;
                            }
                        })*/
                        for(let i=0;i<3;i++){
                            let v = r[i];
                            $(`<li><a href="${v.url}">${v.title}</a><span>${v.readCount}</span></li>`).appendTo('#box');
                        }
                    },
                    error:()=>{
                        alert('出错了！');
                    }               
                })          
            })

        });
    </script>

代码更多使用ES6编写不考虑低级浏览器~