Skip to content

Commit f3b73ca

Browse files
zhouxiaotianzhouxiaotian
committed
AJAX&NODE
1 parent de85980 commit f3b73ca

10 files changed

Lines changed: 604 additions & 1 deletion

File tree

‎10期JS正式课/正式课第七周/CRM/css/detail.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html, body {
7+
width: 100%;
8+
overflow-x: hidden;
9+
10+
color: #555;
11+
font-size: 14px;
12+
}
13+
14+
input {
15+
outline: none;
16+
}
17+
18+
/*--detail--*/
19+
.box {
20+
margin: 10px auto;
21+
padding: 10px;
22+
width: 500px;
23+
border: 2px solid green;
24+
}
25+
26+
.box div {
27+
height: 50px;
28+
line-height: 50px;
29+
}
30+
31+
.box div span {
32+
display: inline-block;
33+
width: 50px;
34+
text-align: center;
35+
}
36+
37+
.box div input {
38+
display: inline-block;
39+
padding: 0 5px;
40+
width: 350px;
41+
height: 30px;
42+
line-height: 30px;
43+
}
44+
45+
#userName, #userAge {
46+
width: 175px;
47+
}
48+
49+
.box div.submit {
50+
margin: 0 auto;
51+
width: 200px;
52+
height: 35px;
53+
line-height: 35px;
54+
text-align: center;
55+
background: green;
56+
cursor: pointer;
57+
58+
color: #FFF;
59+
font-size: 16px;
60+
font-weight: bold;
61+
letter-spacing: 5px;
62+
}

‎10期JS正式课/正式课第七周/CRM/css/index.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html, body {
7+
width: 100%;
8+
overflow-x: hidden;
9+
10+
color: #555;
11+
font-size: 14px;
12+
}
13+
14+
ul, li {
15+
list-style: none;
16+
}
17+
18+
a, a:hover, a:active {
19+
color: #555;
20+
text-decoration: none;
21+
}
22+
23+
.w50 {
24+
width: 50px;
25+
}
26+
27+
.w150 {
28+
width: 150px;
29+
}
30+
31+
.w200 {
32+
width: 200px;
33+
}
34+
35+
/*index*/
36+
.box {
37+
margin: 10px auto;
38+
padding: 10px;
39+
width: 800px;
40+
border: 2px solid green;
41+
}
42+
43+
.box .add-custom {
44+
display: block;
45+
line-height: 35px;
46+
47+
color: green;
48+
font-size: 16px;
49+
}
50+
51+
.box .add-custom:hover {
52+
text-decoration: underline;
53+
}
54+
55+
.box .head {
56+
height: 35px;
57+
line-height: 35px;
58+
text-align: center;
59+
background: green;
60+
61+
color: #FFF;
62+
font-size: 16px;
63+
font-weight: bold;
64+
}
65+
66+
.box .head:after {
67+
display: block;
68+
content: '';
69+
clear: both;
70+
}
71+
72+
.box .head span {
73+
float: left;
74+
}
75+
76+
.custom-list li {
77+
height: 30px;
78+
line-height: 30px;
79+
text-align: center;
80+
}
81+
82+
.custom-list li span {
83+
float: left;
84+
}
85+
86+
.custom-list li span.control a {
87+
display: inline-block;
88+
margin: 0 3px;
89+
color: green;
90+
}
91+
92+
/*以下的样式是CSS3中新增加的,低版本浏览器不兼容*/
93+
.custom-list li:nth-child(even) {
94+
background: #EEE;
95+
}
96+
97+
.custom-list li:hover {
98+
background: #FFEEAA;
99+
}
100+
101+
102+
103+
104+

‎10期JS正式课/正式课第七周/CRM/detail.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>珠峰培训-CRM</title>
6+
<link type="text/css" rel="stylesheet" href="css/detail.css">
7+
</head>
8+
<body>
9+
<div class="box">
10+
<div>
11+
<span>姓名:</span>
12+
<input type="text" id="userName"/>
13+
</div>
14+
<div>
15+
<span>年龄:</span>
16+
<input type="text" id="userAge"/>
17+
</div>
18+
<div>
19+
<span>电话:</span>
20+
<input type="text" id="userPhone"/>
21+
</div>
22+
<div>
23+
<span>地址:</span>
24+
<input type="text" id="userAddress"/>
25+
</div>
26+
<div class="submit" id="submit">提交</div>
27+
</div>
28+
29+
<script type="text/javascript" src="js/ajax.js"></script>
30+
</body>
31+
</html>

‎10期JS正式课/正式课第七周/CRM/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>珠峰培训-CRM</title>
6+
<link type="text/css" rel="stylesheet" href="css/index.css">
7+
</head>
8+
<body>
9+
<div class="box">
10+
<a href="detail.html" class="add-custom">增加新客户</a>
11+
12+
<h2 class="head">
13+
<span class="w50">编号</span>
14+
<span class="w150">姓名</span>
15+
<span class="w50">年龄</span>
16+
<span class="w200">电话</span>
17+
<span class="w200">地址</span>
18+
<span class="w150">操作</span>
19+
</h2>
20+
21+
<ul class="custom-list" id="customList">
22+
<li>
23+
<span class="w50">1</span>
24+
<span class="w150">珠峰培训</span>
25+
<span class="w50">28</span>
26+
<span class="w200">13041086186</span>
27+
<span class="w200">北京市昌平区回龙观东大街</span>
28+
<span class="w150 control">
29+
<a href="">修改</a>
30+
<a href="">删除</a>
31+
</span>
32+
</li>
33+
</ul>
34+
</div>
35+
36+
<script type="text/javascript" src="js/ajax.js"></script>
37+
</body>
38+
</html>

‎10期JS正式课/正式课第七周/CRM/js/ajax.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
function ajax(options) {
2+
//->init parameters
3+
var _default = {
4+
url: null,
5+
type: 'get',
6+
dataType: 'text',
7+
data: null,
8+
cache: true,
9+
async: true,
10+
success: null,
11+
error: null
12+
};
13+
for (var key in options) {
14+
if (options.hasOwnProperty(key)) {
15+
_default[key] = options[key]
16+
}
17+
}
18+
19+
//->SEND AJAX
20+
var xhr = new XMLHttpRequest;
21+
//->如果当前是GET系列的请求,我们的CACHE也设置为FALSE,需要我们清除缓存：在原有的URL的末尾追加随机数即可(之前有问号我们用&符,之前没有才用?)
22+
if (/^(GET|HEAD|DELETE)$/i.test(_default.type) && _default.cache === false) {
23+
var symbol = _default.url.indexOf('?') === -1 ? '?' : '&';
24+
_default.url += symbol + '_=' + Math.random();
25+
}
26+
xhr.open(_default.type, _default.url, _default.async);
27+
xhr.onreadystatechange = function () {
28+
if (/^(2|3)\d{2}$/.test(xhr.status)) {
29+
if (xhr.readyState === 4) {
30+
var text = xhr.responseText;
31+
//->从服务器获取的是字符串,我们需要把它转换为我们需要的
32+
switch (_default.dataType) {
33+
case 'json':
34+
text = 'JSON' in window ? JSON.parse(text) : eval('(' + text + ')');
35+
break;
36+
case 'xml':
37+
text = xhr.responseXML;
38+
break;
39+
}
40+
_default.success && _default.success.call(xhr, text);
41+
}
42+
return;
43+
}
44+
if (xhr.readyState === 4) {
45+
_default.error && _default.error.call(xhr, xhr.responseText);
46+
}
47+
};
48+
xhr.send(_default.data);
49+
}
50+
51+
/*ajax({
52+
url: '',//->Request URL
53+
type: '',//->HTTP METHOD 都是小写的:get(默认) post head put delete...
54+
dataType: '',//->获取的数据转换为什么样的类型(预设返回的数据类型),从服务器获取的一般都是字符串,我们可以把获取的字符串按照预定的方式进行转换 text(默认)、json、xml...
55+
data: '',//->如果是GET请求默认是null POST请求如果需要传递给服务器内容,我们把内容放到DATA中即可,一般都是JSON格式的字符串
56+
cache: false,//->默认是TRUE 如果是GET请求,我们设置了FALSE,不想走缓存,在URL的末尾加随机数
57+
async: true,//->默认是TRUE异步 FALSE同步
58+
success: function (result) {//->请求成功后做的事情
59+
60+
},
61+
error: function (result) {//->请求失败后做的事情
62+
63+
}
64+
});*/

‎10期JS正式课/正式课第七周/CRM/json/custom.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
[
2+
{
3+
"id": 2,
4+
"name": "江仁",
5+
"age": 1,
6+
"phone": "13026588666",
7+
"address": "北京市"
8+
},
9+
{
10+
"id": 4,
11+
"name": "刘燕娇",
12+
"age": 20,
13+
"phone": "15816345987",
14+
"address": "北京市昌平区"
15+
},
16+
{
17+
"name": "王晨",
18+
"age": 72,
19+
"phone": "16856986666",
20+
"address": "北京市海淀区",
21+
"id": 5
22+
},
23+
{
24+
"name": "哈哈",
25+
"age": 28,
26+
"phone": "12032568888",
27+
"address": "北京市中南海",
28+
"id": 6
29+
}
30+
]

0 commit comments

Comments
 (0)