本文共 5430 字，大约阅读时间需要 18 分钟。

在网上有一个很有意思的程序，叫程序员老黄历，大家可以百度搜索看看。我们也可以自己做一个，所以本文就来带领大家实现一个非常简单的程序员老黄历。但是仅凭我们现在的知识，还不足以做出这样一个程序，因为还要学习一些新知识，例如JSON。

JSON

现在常用的有两种数据交换格式：

1. JSON；
2. XML。关于它，大家也不要急，后面就会介绍到了。

那么JSON是一种什么东东呢？

什么是JSON

据度娘记载：

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

JSON的格式

使用JQuery发送请求局部刷新页面

为了实现一个非常简单的程序员老黄历这样一个小程序，我需要提前准备好一个样式层叠表——laohuangli.css和一个JSON数组格式的data.json文件。

• laohuangli.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;}

• data.json文件的内容如下：

  [    {
               "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    }]

  待会我会发出一个最简单的异步请求，请求该data.json文件中的数据。

读者要做的事就是导入样式层叠表——laohuangli.css。首先我从自己编写的程序员老黄历页面中抽出核心代码如下：

			
   				
   						
   
			
    
     				程序员老黄历			
    
			
    
				
     
					
      
						       
        
         
宜
        
					       
      
				
     
				
     
					
      
											
      
				
     
				
     
			
    
						
    
						
    
				
     
					
      
						       
        
         
不宜
        
					       
      
				
     
				
     
					
      
											
      
				
     
				
     
			
    
		
   
	

接着就要编写jQuery代码发送请求局部刷新页面了。

最后，在Chrome浏览器上运行，效果如下：

转载地址：https://liayun.blog.csdn.net/article/details/85934709 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！