-
Notifications
You must be signed in to change notification settings - Fork 1
/
node1.ejs
147 lines (136 loc) · 5.08 KB
/
node1.ejs
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= title %></title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' /> -->
<style media="screen">
body {
padding: 20px 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
cursor: pointer;
}
.container{position: relative;width: 1100px;overflow: hidden;zoom:1;}
.jobs{margin: 30px; float: left;}
.jobs span{ color: green; font-weight: bold;}
.btn{cursor: pointer;}
.fetching{display: none;color: red;}
.footer{clear: both;}
/* Table Head */
table thead th {
background-color: rgb(128, 102, 160);
color: #fff;
border-bottom-width: 0;
}
/* Column Style */
table td {
color: #555;
}
/* Heading and Column Style */
table tr, table th {
border-width: 1px;
border-style: solid;
border-color: rgb(128, 102, 160);
}
/* Padding and font style */
table td, table th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}
</style>
</head>
<body>
<h3>【nodejs爬虫】 获取上海链家房屋价格信息(张江地区租房价格)</h3>
<p>初始化完成 ...</p>
<p><button class="btn" id="btn0" onclick="cheerFetch(1)">点击开始抓取第一页</button></p>
<div class="container">
<!--<div class="jobs"> </div>-->
</div>
<div class="footer">
<p class="fetching">数据抓取中 ... 请稍后</p>
<button class="btn" id="btn1" onclick="cheerFetch(--currentPage)">抓取上一页</button>
<button class="btn" id="btn2" onclick="cheerFetch(++currentPage)">抓取下一页</button>
</div>
<script src="//mobiccdai.ppdaicdn.com/source/ccdcps6/js/jquery.min.js"></script>
<script type="text/javascript">
function getData(str){ //获取到的数据有杂乱..需要把前面部分去掉,只需要data(<em>......<em> data)
if(str){
return str.slice(str.lastIndexOf(">")+1);
}
}
document.getElementById("btn1").style.visibility = "hidden";
document.getElementById("btn2").style.visibility = "hidden";
var currentPage = 0; //page初始0
function cheerFetch(_page){ //抓取数据处理函数
if(_page == 1){
currentPage = 1; //开始抓取则更改page
}
$(document).ajaxSend(function(event, xhr, settings) { //抓取中...
$(".fetching").css("display","block");
});
$(document).ajaxSuccess(function(event, xhr, settings) { //抓取成功
$(".fetching").css("display","none");
});
$.ajax({ //开始发送ajax请求至路径 /getJobs 进而作页面抓取处理
data:{page:_page}, //参数 page = _page
dataType: "json",
type: "get",
url: "/getJobs",
success: function(data){ //收到返回的json数据
console.log("共有数据:"+data.jobs.length);
$(".container").empty();
if(data.jobs.length == 0){
alert("Error2: 未找到数据..");
return;
}
var tablelength=data.jobs.length;
var html = "";
html += " <table cellspacing='0' cellpadding='0'>";
html += "<tr>";
html += "<th>序号:</th>";
// html += " <th>自如</th>";
html += "<th>标题</th>";
html += "<th>地点大小</th>";
html += " <th>其他信息</th>";
html += "<th>单价(元/月)</th>";
html += " <th>上架时间</th>";
html += " <th>多少人看过此房</th>";
html += "</tr>";
for (var i = 0; i < tablelength; i++) {
var job = data.jobs[i];
html += "<tr>";
// html += "<td>" + _data.content.lenderInfos[i].lenderName + "</td>";
html += "<td>" +((i+1)+20*(currentPage-1))+"</td>";
// html += "<td>" + job.ziru + "</td>";
html += "<td>" + job.propTitle+ "</td>";
html += "<td>" +job.louceng1+job.louceng2+ "</td>";
html += "<td>" +job.Other2+ "</td>";
html += "<td>" + job.price + "</td>";
html += "<td>" + job.pricePre + "</td>";
html += "<td>" + job.see+ "</td>";
html += "</tr>";
};
html += "</tbody>";
html += "</table>";
$(".container").append(html); //展现至页面
if(_page == 1){
document.getElementById("btn1").style.visibility = "hidden";
document.getElementById("btn2").style.visibility = "visible";
}else if(_page > 1){
document.getElementById("btn1").style.visibility = "visible";
document.getElementById("btn2").style.visibility = "visible";
}
},
error: function(){
alert("Error1: 未找到数据..");
}
});
}
</script>
</body>
</html>