介绍：
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编写 不考虑低级浏览器~
网友评论