欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 15:43:09
json 什么是JSON "JSON" ( "JavaScript" Object Notation) 是一种轻量级的数据交换格式。它基于 "ECMAScript" 的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括 "C" 、C++、 "C " 、 "Ja ......

json

  • 什么是json

    json(javascript object notation) 是一种轻量级的数据交换格式。它基于ecmascript的一个子集。 json采用完全独立于语言的文本格式,但是也使用了类似于c语言家族的习惯(包括c、c++、c#java、javascript、perlpython等)。这些特性使json成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。

  • json格式

    ​ json对象

    { key1:value}   
    {"username":"zhangsan","password":"123"}
    

    ​ json数组

    [{ key1:value},{ key1:value},{ key1:value}]
    

程序员老黄历案例

参考以下链接

代码实现

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

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

  1. html