一、使用JQuery发送请求局部刷新页面
1. json：
1
2
| JSON对象：{key1:value} ---例如：{"username":"zhangsan","password":"134560"}
JSON数组：[{key1:value}{key1:value}{key1:value}]
|
2. xml：
实现老黄历主要代码如下：
1
2
3
4
5
6
7
| 1.使用get方法
$.get(url,function(jsonArr){里面具体变换},json);
2.写好一个数据json文件 用来去调用
var url = "http://127.0.0.1:8848/day05-bootstrap/data.json";
3.寻找ul标签就是使用 ".good ul" //类加载器 标签(后代)
$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>")
//class使用外引入的css文件里面的类加载器
|
具体代码如下:
所引入的css和js文件都存在本代码文件夹内
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/laohuangli.css" />
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script>
//文档加载事件
$(function(){
//请求链接，动态显示数据ajax
//JQ的get方法(url:待载入的页面，data:待发送key/value值，callback:载入成功回调函数，type：返回内容格式xml/html/script/json/text/_default)
var url = "http://127.0.0.1:8848/day05-bootstrap/data.json"; //获取到那些临时刷新的数据
//ajax 最简单异步请求网络
$.get(url,function(jsonArr){ //存到数组去
var i=Math.floor(Math.random()*3+3); //JS的方法 得到1/2/3这三个整数
while(i>0){ //随机循环取几条数据
//随机去取一条数据
var index=Math.floor(Math.random()*jsonArr.length);
var obj=jsonArr[index];
//适合干嘛
$(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>");
i--;
}
var j = Math.floor(Math.random()*3+2) //
while(j > 0){
var index = Math.floor(Math.random()*jsonArr.length)
var obj = jsonArr[index];
//不适合干嘛
$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>")
j--;
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="title">
程序员老黄历
</div>
<div class="good">
<div class="title">
<table>
<tr><td>宜</td></tr>
</table>
</div>
<div class="content">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="split"></div>
<div class="bad">
<div class="title">
<table>
<tr><td>不宜</td></tr>
</table>
</div>
<div class="content">
<ul>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
|
代码结果如下：
