首页 > 代码库 > 数据同步

数据同步

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数据同步</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 80%;
			min-width: 1200px;
			margin: 0 auto;
		}
		.con-left,.con-right{
			vertical-align: top;
			width: 50%;
			display: inline-block;
		}
		.data li.on{
			color: red;
		}
		.deal li{
			cursor: pointer;
		}
	</style>
</head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<body>
	<div class="content">
		<div class="con-left">
			<ul class="data"></ul>
		</div><div class="con-right">
			<ul class="deal"></ul>
		</div>
	</div>
</body>	
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
	$.ajax({
        url: "list.json",
        dataType: "json",
        type: "get",
        //async: false,
        success: function(d){
        	var data = http://www.mamicode.com/d.data.tweetlist;"",
        		dealStr = "";
        	for(var item in data){
        		dataStr += ‘<li class="on" rel="‘+data[item].id+‘">‘+data[item].content+‘</li>‘;
        		dealStr += ‘<li rel="‘+data[item].id+‘">关闭</li>‘;
        	}
        	$(".data").html(dataStr);
        	$(".deal").html(dealStr);
        },
        error: function(d){
            console.log(d);
        }
    })
	$(function(){
		$(".deal").on("click","li",function(){
			var thisId = $(this).attr("rel");
			$(".data li[rel=‘"+thisId+"‘]").removeClass("on");
			$(this).css("display","none");
		})
		$(".data").on("click","li",function(){
			var thisId = $(this).attr("rel");
			$(".deal li[rel=‘"+thisId+"‘]").css("display","list-item");
			$(this).addClass("on");
		})

	})
</script>
</html>

  

技术分享
{
  "ecode": 200,
  "data": {
    "tweetlist": [
      {
        "id": 418,
        "content": "毛剑卿强行突破",
        "userid": 62,
        "createdate": "2015-07-15 11:29:20",
        "defaultPhotoid": 534,
        "nickname": "111",
        "pic": "img/11.jpg"
      },
      {
        "id": 419,
        "content": "马季奇向裁判示意对手拉扯",
        "userid": 62,
        "createdate": "2015-07-15 11:29:31",
        "defaultPhotoid": 536,
        "nickname": "111",
        "pic": "img/12.jpg"
      },
      {
        "id": 417,
        "content": "马季奇控球",
        "userid": 62,
        "createdate": "2015-07-15 11:29:06",
        "defaultPhotoid": 532,
        "nickname": "111",
        "pic": "img/13.jpg"
      },
      {
        "id": 416,
        "content": "隆东带球突破",
        "userid": 62,
        "createdate": "2015-07-15 11:28:49",
        "defaultPhotoid": 530,
        "nickname": "111",
        "pic": "img/14.jpg"
      },
      {
        "id": 415,
        "content": "孔卡带球反击",
        "userid": 62,
        "createdate": "2015-07-15 11:28:35",
        "defaultPhotoid": 528,
        "nickname": "111",
        "pic": "img/15.jpg"
      },
      {
        "id": 414,
        "content": "海森远射发炮",
        "userid": 62,
        "createdate": "2015-07-15 11:28:17",
        "defaultPhotoid": 526,
        "nickname": "111",
        "pic": "img/16.jpg"
      },
      {
        "id": 413,
        "content": "海森强势突破",
        "userid": 62,
        "createdate": "2015-07-15 11:27:58",
        "defaultPhotoid": 524,
        "nickname": "111",
        "pic": "img/17.jpg"
      },
      {
        "id": 412,
        "content": "头球攻门",
        "userid": 62,
        "createdate": "2015-07-15 11:27:38",
        "defaultPhotoid": 522,
        "nickname": "111",
        "pic": "img/18.jpg"
      },
      {
        "id": 411,
        "content": "前首尔FC球员德扬和河大成",
        "userid": 62,
        "createdate": "2015-07-15 11:27:21",
        "defaultPhotoid": 520,
        "nickname": "111",
        "pic": "img/19.jpg"
      },
      {
        "id": 410,
        "content": "周挺发球",
        "userid": 62,
        "createdate": "2015-07-15 11:26:38",
        "defaultPhotoid": 518,
        "nickname": "111",
        "pic": "img/20.jpg"
      },
      {
        "id": 409,
        "content": "黑山伊布-德扬的强力突破",
        "userid": 62,
        "createdate": "2015-07-15 11:26:07",
        "defaultPhotoid": 516,
        "nickname": "111",
        "pic": "img/21.jpg"
      },
      {
        "id": 408,
        "content": "河大成进球",
        "userid": 62,
        "createdate": "2015-07-15 11:25:20",
        "defaultPhotoid": 514,
        "nickname": "111",
        "pic": "img/22.jpg"
      },
      {
        "id": 407,
        "content": "斯科拉里指挥梅方",
        "userid": 62,
        "createdate": "2015-07-15 11:25:00",
        "defaultPhotoid": 512,
        "nickname": "111",
        "pic": "img/23.jpg"
      },
      {
        "id": 406,
        "content": "阿洛伊西奥进球",
        "userid": 62,
        "createdate": "2015-07-15 11:24:16",
        "defaultPhotoid": 510,
        "nickname": "111",
        "pic": "img/24.jpg"
      },
      {
        "id": 405,
        "content": "塔尔德利",
        "userid": 62,
        "createdate": "2015-07-15 11:23:43",
        "defaultPhotoid": 508,
        "nickname": "111",
        "pic": "img/25.jpg"
      },
      {
        "id": 404,
        "content": "遭遇夹防",
        "userid": 62,
        "createdate": "2015-07-15 11:23:22",
        "defaultPhotoid": 506,
        "nickname": "111",
        "pic": "img/26.jpg"
      },
      {
        "id": 403,
        "content": "野牛发威",
        "userid": 62,
        "createdate": "2015-07-15 11:22:41",
        "defaultPhotoid": 504,
        "nickname": "111",
        "pic": "img/27.jpg"
      },
      {
        "id": 402,
        "content": "王大雷很无奈",
        "userid": 62,
        "createdate": "2015-07-15 11:11:48",
        "defaultPhotoid": 502,
        "nickname": "111",
        "pic": "img/28.jpg"
      },
      {
        "id": 401,
        "content": "王大雷失球后愤怒踢门",
        "userid": 62,
        "createdate": "2015-07-15 11:11:30",
        "defaultPhotoid": 500,
        "nickname": "111",
        "pic": "img/29.jpg"
      },
      {
        "id": 400,
        "content": "快马刘彬彬绝杀",
        "userid": 62,
        "createdate": "2015-07-15 11:10:47",
        "defaultPhotoid": 498,
        "nickname": "111",
        "pic": "img/30.jpg"
      },
      {
        "id": 399,
        "content": "王大雷失误",
        "userid": 62,
        "createdate": "2015-07-15 11:10:28",
        "defaultPhotoid": 496,
        "nickname": "111",
        "pic": "img/31.jpg"
      },
      {
        "id": 395,
        "content": "不停的追逐",
        "userid": 62,
        "createdate": "2015-07-15 11:09:18",
        "defaultPhotoid": 488,
        "nickname": "111",
        "pic": "img/32.jpg"
      },
      {
        "id": 392,
        "content": "王永珀进球",
        "userid": 62,
        "createdate": "2015-07-15 11:07:58",
        "defaultPhotoid": 482,
        "nickname": "111",
        "pic": "img/33.jpg"
      },
      {
        "id": 391,
        "content": "重庆球迷祝恒大亚冠夺冠",
        "userid": 62,
        "createdate": "2015-07-15 11:07:43",
        "defaultPhotoid": 480,
        "nickname": "111",
        "pic": "img/34.jpg"
      },
      {
        "id": 390,
        "content": "重庆力帆铁杆球迷",
        "userid": 62,
        "createdate": "2015-07-15 11:07:04",
        "defaultPhotoid": 478,
        "nickname": "111",
        "pic": "img/35.jpg"
      },
      {
        "id": 389,
        "content": "红色海洋",
        "userid": 62,
        "createdate": "2015-07-15 11:06:40",
        "defaultPhotoid": 476,
        "nickname": "111",
        "pic": "img/36.jpg"
      },
      {
        "id": 388,
        "content": "排山倒海",
        "userid": 62,
        "createdate": "2015-07-15 11:06:28",
        "defaultPhotoid": 474,
        "nickname": "111",
        "pic": "img/37.jpg"
      },
      {
        "id": 387,
        "content": "郑龙进球",
        "userid": 62,
        "createdate": "2015-07-15 10:57:45",
        "defaultPhotoid": 472,
        "nickname": "111",
        "pic": "img/38.jpg"
      }
    ]
  }
}
View Code

 

数据同步