使用JQuery发送请求局部刷新页面
json
什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。
JSON格式
JSON对象
{ key1:value} {"username":"zhangsan","password":"123"}JSON数组
[{ key1:value},{ key1:value},{ key1:value}]
程序员老黄历案例
参考以下链接
http://www.liweicg.cn/
代码实现
1.导入文件
css
body * {
font-family:"Consolas","Microsoft Yahei", Arial, sans-serif;
}
body {
background: white;
margin: 0;
padding: 0;
}
.container {
width: 320px;
margin: 0 auto 50px;
}
.container>.title {
color: #bbb;
font-weight: bold;
margin-bottom: 10px;
background: #555;
padding: 5px 15px;
}
.split, .clear {
clear: both;
height: 1px;
overflow-y: hidden;
}
.good, .bad {
clear: both;
position: relative;
}
.bad {
/*top: -1px;*/
}
.good .title, .bad .title {
float: left;
width: 100px;
font-weight: bold;
text-align: center;
font-size: 30pt;
position:absolute;
top:0;
bottom:0;
}
.good .title>table, .bad .title>table {
position:absolute;
width:100%;
height:100%;
border:none;
}
.good .title {
background: #ffee44;
}
.bad .title {
background: #ff4444;
color: #fff;
}
.good .content, .bad .content {
margin-left: 115px;
padding-right: 10px;
padding-top: 1px;
font-size:15pt;
}
.good {
background: #ffffaa;
}
.bad {
background: #ffddd3;
}
.content ul {
list-style: none;
margin:10px 0 0;
padding:0;
}
.content ul li {
line-height:150%;
font-size: 15pt;
font-weight: bold;
color: #444;
}
.content ul li div.description {
font-size: 11pt;
font-weight: normal;
color: #777;
line-height: 110%;
margin-bottom: 10px;
}
json.data
[
{
"name": "写单元测试",
"good": "写单元测试将减少出错",
"bad": "写单元测试会降低你的开发效率"
},
{
"name": "洗澡",
"good": "你几天没洗澡了？",
"bad": "会把设计方面的灵感洗掉",
"weekend": true
},
{
"name": "锻炼一下身体",
"good": "",
"bad": "能量没消耗多少，吃得却更多",
"weekend": true
},
{
"name": "抽烟",
"good": "抽烟有利于提神，增加思维敏捷",
"bad": "除非你活够了，死得早点没关系",
"weekend": true
},
{
"name": "白天上线",
"good": "今天白天上线是安全的",
"bad": "可能导致灾难性后果"
},
{
"name": "重构",
"good": "代码质量得到提高",
"bad": "你很有可能会陷入泥潭"
},
{
"name": "使用%t",
"good": "你看起来更有品位",
"bad": "别人会觉得你在装逼"
},
{
"name": "跳槽",
"good": "该放手时就放手",
"bad": "鉴于当前的经济形势，你的下一份工作未必比现在强"
},
{
"name": "招人",
"good": "你面前这位有成为牛人的潜质",
"bad": "这人会写程序吗？"
},
{
"name": "面试",
"good": "面试官今天心情很好",
"bad": "面试官不爽，会拿你出气"
},
{
"name": "提交辞职申请",
"good": "公司找到了一个比你更能干更便宜的家伙，巴不得你赶快滚蛋",
"bad": "鉴于当前的经济形势，你的下一份工作未必比现在强"
},
{
"name": "申请加薪",
"good": "老板今天心情很好",
"bad": "公司正在考虑裁员"
},
{
"name": "晚上加班",
"good": "晚上是程序员精神最好的时候",
"bad": "",
"weekend": true
},
{
"name": "在妹子面前吹牛",
"good": "改善你矮穷挫的形象",
"bad": "会被识破",
"weekend": true
},
{
"name": "撸管",
"good": "避免缓冲区溢出",
"bad": "强撸灰飞烟灭",
"weekend": true
},
{
"name": "浏览成人网站",
"good": "重拾对生活的信心",
"bad": "你会心神不宁",
"weekend": true
},
{
"name": "命名变量\"%v\"",
"good": "",
"bad": ""
},
{
"name": "写超过%l行的方法",
"good": "你的代码组织的很好，长一点没关系",
"bad": "你的代码将混乱不堪，你自己都看不懂"
},
{
"name": "提交代码",
"good": "遇到冲突的几率是最低的",
"bad": "你遇到的一大堆冲突会让你觉得自己是不是时间穿越了"
},
{
"name": "代码复审",
"good": "发现重要问题的几率大大增加",
"bad": "你什么问题都发现不了，白白浪费时间"
},
{
"name": "开会",
"good": "写代码之余放松一下打个盹，有益健康",
"bad": "小心被扣屎盆子背黑锅"
},
{
"name": "打DOTA",
"good": "你将有如神助",
"bad": "你会被虐的很惨",
"weekend": true
},
{
"name": "晚上上线",
"good": "晚上是程序员精神最好的时候",
"bad": "你白天已经筋疲力尽了"
},
{
"name": "修复BUG",
"good": "你今天对BUG的嗅觉大大提高",
"bad": "新产生的BUG将比修复的更多"
},
{
"name": "设计评审",
"good": "设计评审会议将变成头脑风暴",
"bad": "人人筋疲力尽，评审就这么过了"
},
{
"name": "需求评审",
"good": "",
"bad": ""
},
{
"name": "上微博",
"good": "今天发生的事不能错过",
"bad": "今天的微博充满负能量",
"weekend": true
},
{
"name": "上AB站",
"good": "还需要理由吗？",
"bad": "满屏兄贵亮瞎你的眼",
"weekend": true
},
{
"name": "玩FlappyBird",
"good": "今天破纪录的几率很高",
"bad": "除非你想玩到把手机砸了",
"weekend": true
}
]
js
- html
赞 (0)