html布局：
1 <div class="column">
2 <div class="panel bl bar1">
3 <div class="panelFooter"></div>
4 <h2>世界疫情資料匯總查詢</h2>
5 <div class="map-table">
6 <table align="center" style="margin:3px" cellspacing="7px">
7 <form id="find_value">
8 <label><font color="#ff7f50">輸入國家：</font></label>
9 <input id="cname" type="text" name="cname" placeholder="" value="">
10 <input type="button" value="查詢" onclick="find_res()">
11 <input type="reset" value="重置">
12 </form>
13 <thead>
14 <tr style="color: #FFB6C1">
15 <th>時間</th>
16 <th>國家</th>
17 <th>累計確診</th>
18 <th>累計治愈</th>
19 <th>累計死亡</th>
20 <th>現存確診</th>
21 <th>排名</th>
22 </tr>
23 </thead>
24 <tbody id="bd_data">
25 </tbody>
26 </table>
27 <!-- <div ></div>-->
28 <!-- <div ></div>-->
29 </div>
30 </div>
31 </div>
CSS布局：
1 th{
2 font-size: 14px;
3 }
4 td{
5 font-size: 12px;
6 background: rgba(176, 196, 222, 0.4);
7 }
8 .map-table{
9 position: absolute;
10 margin: 20px 10px 10px 10px;
11 overflow:scroll;
12 height: 9.2rem;
13 }
14 .panel {
15 position: relative;
16 height: 5rem;
17 /* width: 100%; */
18 border: 1px solid rgba(25, 186, 139, 0.17);
19 background: rgba(21, 25, 101, 0.5) url('../images/line(1).png');
20 padding: 0 0.1875rem 0.5rem;
21 margin-bottom: 0.3rem;
22 }
23
24 .panelFooter {
25 position: absolute;
26 bottom: 0;
27 left: 0;
28 /* background-color: pink; */
29 height: 10px;
30 width: 100%;
31 }
32
33 .panelFooter::before {
34 position: absolute;
35 top: 0;
36 /* 要給內容 */
37 content: "";
38 left: 0;
39 height: 10px;
40 width: 10px;
41 border-bottom: 2px solid #02a6b5;
42 border-left: 2px solid #02a6b5;
43 }
44
45 .panelFooter::after {
46 position: absolute;
47 top: 0;
48 /* 要給內容 */
49 content: "";
50 right: 0;
51 height: 10px;
52 width: 10px;
53 border-bottom: 2px solid #02a6b5;
54 border-right: 2px solid #02a6b5;
55 }
資料庫查詢代碼：
結果型別：
[ { } ,{ } ]
1 def find_worldByName(c_name):
2 sql = " SELECT * FROM world WHERE c_name LIKE '%%%%%s%%%%' order by dt desc "%c_name
3 # sql_temp = " SELECT * FROM world WHERE c_name LIKE '"+c_name+"'"
4 res = query(sql)
5 list= []
6 for i in res:
7 # print(i)
8 list.append(i)
9 return list;
爬取世界疫情資料（中國的資料已經另外爬取并和世界資料一起存入資料庫）
1 """
2 獲取全球疫情資料
3 """
4 def get_world_data():
5 #爬取中國資料
6 china_url = 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102848205531413024_1584924641755&_=1584924641756'
7 china_headers = {
8 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3741.400 QQBrowser/10.5.3863.400'
9 }
10 res = requests.get(china_url, headers=china_headers)
11 # 輸出全部資訊
12 # print(res.text)
13 china_response_data = https://www.cnblogs.com/rainbow-1/archive/2021/04/09/json.loads(res.text.replace('jQuery34102848205531413024_1584924641755(', '')[:-1])
14 # print(china_response_data)
15 print(json.loads(china_response_data['data']).keys())
16 res_china=json.loads(china_response_data['data']);
17 print(res_china['chinaTotal'])
18 print(res_china['chinaAdd'])
19 url='https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist'
20 headers={'user-agent': 'WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36'}
21 # 創建會話物件
22 # session = requests.session()
23 # 請求介面
24 # result = session.get('https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist')
25 # 列印結果
26 # print(result.text)
27 res = requests.get(url,headers=headers)
28 # print(res.text)
29 response_data_0 = json.loads(res.text.replace('jQuery34102848205531413024_1584924641755(', '')[:-1]) #轉化json物件
30 # print(response_data_0.keys())
31 # print(response_data_0)
32 response_data_1=response_data_0['data']
33 # print(response_data_1)
34 # print(response_data_1)
35 # print(response_data_1[0].keys())
36 # data = https://www.cnblogs.com/rainbow-1/archive/2021/04/09/jsonpath.jsonpath(resJson_1,'$.data.*')
37 # print(resJson_1.keys())
38 # for d in data:
39 # res = '日期:' + d['date'] + '--' + d['continent'] + '--' + d['name'] + '--' + '新增確診:' + str(
40 # d['confirmAdd']) + '累計確診:' + str(d['confirm']) + '治愈:' + str(d['heal']) + '死亡:' + str(d['dead'])
41 # file = r'C:/Users/Administrator/Desktop/world_data.txt'
42 # with open(file, 'w+', encoding='utf-8') as f:
43 # f.write(res + '\n') # 加\n換行顯示
44 # f.close()
45 world={}
46 for i in response_data_1:
47 temp=i['y']+'.'+i['date']
48 tup = time.strptime(temp, '%Y.%m.%d')
49 # print(tup)
50 dt = time.strftime('%Y-%m-%d %H:%M:%S', tup) # 改變時間格式，插入資料庫 日期
51 # print(dt)
52 c_name=i['name'] #國家
53 continent=i['continent'] #所屬大洲
54 nowConfirm=i['nowConfirm'] #現有確診
55 confirm=i['confirm'] #累計確診
56 confirmAdd=i['confirmAdd'] #新增確診
57 suspect=i['suspect'] #現有疑似
58 heal=i['heal'] #累計治愈
59 dead=i['dead'] #累計死亡
60 confirmAddCut=i['confirmAddCut']
61 confirmCompare=i['confirmCompare']
62 nowConfirmCompare=i['nowConfirmCompare']
63 healCompare=i['healCompare']
64 deadCompare=i['deadCompare']
65 world[c_name] = {'dt':dt ,
66 'continent': continent,
67 'nowConfirm': nowConfirm,
68 'confirm': confirm,
69 'confirmAdd': confirmAdd,
70 'suspect': suspect,
71 'heal': heal,
72 'dead': dead,
73 'confirmAddCut': confirmAddCut,
74 'confirmCompare': confirmCompare,
75 'nowConfirmCompare': nowConfirmCompare,
76 'healCompare': healCompare,
77 'deadCompare': deadCompare,
78 }
79
80 temp = response_data_1[0]['y'] + '.' + response_data_1[0]['date']
81 tup = time.strptime(temp, '%Y.%m.%d')
82 # print(tup)
83 dt = time.strftime('%Y-%m-%d %H:%M:%S', tup) # 改變時間格式，插入資料庫 日期
84 world["中國"] = {'dt': dt,
85 'continent': "亞洲",
86 'nowConfirm': res_china['chinaTotal']['nowConfirm'],
87 'confirm': res_china['chinaTotal']['confirm'],
88 'confirmAdd': res_china['chinaAdd']['confirm'],
89 'suspect': res_china['chinaTotal']['suspect'],
90 'heal': res_china['chinaTotal']['heal'],
91 'dead': res_china['chinaTotal']['dead'],
92 'confirmAddCut': 0,
93 'confirmCompare': 0,
94 'nowConfirmCompare': 0,
95 'healCompare': 0,
96 'deadCompare': 0,
97 }
98 return world
99 def insert_world():
100 """
101 更新 world 表
102 :return:
103 """
104 cursor = None
105 conn = None
106 try:
107 dic = get_world_data()
108 # print(dic)
109 conn, cursor = get_conn()
110 sql = "insert into world values(%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
111 sql_query = 'select %s=(select dt from world order by id desc limit 1)' #對比當前最大時間戳
112 cursor.execute(sql_query,dic['美國']['dt'])
113 print(dic['美國']['dt'])
114 if not cursor.fetchone()[0]:
115 print(f"{time.asctime()}開始插入世界資料")
116 for k, v in dic.items():
117 cursor.execute(sql, [0,v.get('dt'), k, v.get("continent"), v.get("nowConfirm"),
118 v.get("confirm"), v.get("confirmAdd"),v.get("suspect"),v.get("heal"), v.get("dead")
119 , v.get("confirmAddCut"), v.get("confirmCompare"), v.get("nowConfirmCompare"), v.get("healCompare"),
120 v.get("deadCompare")])
121 conn.commit() # 提交事務
122 print(f"{time.asctime()}插入世界資料完畢")
123 else:
124 print(f"{time.asctime()}世界資料已是最新資料！")
125 except:
126 traceback.print_exc()
127 finally:
128 close_conn(conn, cursor)
后臺js代碼（控制圖表聯動，給表格賦值和查詢功能）
1 //給表格添加資料
2 function get_table() {
3 $.ajax({
4 async: true,
5 url: "/table",
6 // dataType:"json",
7 success: function (data) {
8 var table_data=https://www.cnblogs.com/rainbow-1/archive/2021/04/09/data.data;
9 // alert(table_data)
10 for(var i=0;i<table_data.length;i++){
11 // console.log(table_data[i]);
12 }
13 var appendHTML = "";
14 if($(".map-table tbody tr").length>0){
15 $(".map-table tbody tr").remove();
16 }
17 // alert(table_data.length)
18 for(var i=0; i<table_data.length; i++){
19 //分割日期字串
20 strdt=table_data[i].dt.split(" ");
21 strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3]
22 appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+
23 strdt+"</td><td>"+
24 table_data[i].c_name+"</td><td>"+
25 table_data[i].confirm+"</td><td>"+
26 table_data[i].heal+"</td><td>"+
27 table_data[i].dead+"</td><td>"+
28 table_data[i].nowConfirm+"</td><td>"+
29 (i+1)+"</td></tr>";
30 $(".map-table tbody").append(appendHTML);
31 }
32 }
33 })
34 }
35 get_table();
36 setInterval(get_table,100000);
37 //地圖模塊
38 (function() {
39 var myChart = echarts.init(document.querySelector('.map .chart'))
40 var nameMap = {
41 "Canada": "加拿大",
42 "Turkmenistan": "土庫曼斯坦",
43 "Saint Helena": "圣赫勒拿",
44 "Lao PDR": "老撾",
45 "Lithuania": "立陶宛",
46 "Cambodia": "柬埔寨",
47 "Ethiopia": "埃塞俄比亞",
48 "Faeroe Is.": "法羅群島",
49 "Swaziland": "斯威士蘭",
50 "Palestine": "巴勒斯坦",
51 "Belize": "伯利茲",
52 "Argentina": "阿根廷",
53 "Bolivia": "玻利維亞",
54 "Cameroon": "喀麥隆",
55 "Burkina Faso": "布基納法索",
56 "Aland": "奧蘭群島",
57 "Bahrain": "巴林",
58 "Saudi Arabia": "沙特阿拉伯",
59 "Fr. Polynesia": "法屬波利尼西亞",
60 "Cape Verde": "佛得角",
61 "W. Sahara": "西撒哈拉",
62 "Slovenia": "斯洛文尼亞",
63 "Guatemala": "危地馬拉",
64 "Guinea": "幾內亞",
65 "Dem. Rep. Congo": "剛果（金）",
66 "Germany": "德國",
67 "Spain": "西班牙",
68 "Liberia": "利比里亞",
69 "Netherlands": "荷蘭",
70 "Jamaica": "牙買加",
71 "Solomon Is.": "所羅門群島",
72 "Oman": "阿曼",
73 "Tanzania": "坦桑尼亞",
74 "Costa Rica": "哥斯達黎加",
75 "Isle of Man": "曼島",
76 "Gabon": "加蓬",
77 "Niue": "紐埃",
78 "Bahamas": "巴哈馬",
79 "New Zealand": "新西蘭",
80 "Yemen": "也門",
81 "Jersey": "澤西島",
82 "Pakistan": "巴基斯坦",
83 "Albania": "阿爾巴尼亞",
84 "Samoa": "薩摩亞",
85 "Czech Rep.": "捷克",
86 "United Arab Emirates": "阿拉伯聯合酋長國",
87 "Guam": "關島",
88 "India": "印度",
89 "Azerbaijan": "阿塞拜疆",
90 "N. Mariana Is.": "北馬里亞納群島",
91 "Lesotho": "萊索托",
92 "Kenya": "肯尼亞",
93 "Belarus": "白俄羅斯",
94 "Tajikistan": "塔吉克斯坦",
95 "Turkey": "土耳其",
96 "Afghanistan": "阿富汗",
97 "Bangladesh": "孟加拉國",
98 "Mauritania": "毛里塔尼亞",
99 "Dem. Rep. Korea": "朝鮮",
100 "Saint Lucia": "圣盧西亞",
101 "Br. Indian Ocean Ter.": "英屬印度洋領地",
102 "Mongolia": "蒙古",
103 "France": "法國",
104 "Cura?ao": "庫拉索島",
105 "S. Sudan": "南蘇丹",
106 "Rwanda": "盧旺達",
107 "Slovakia": "斯洛伐克",
108 "Somalia": "索馬里",
109 "Peru": "秘魯",
110 "Vanuatu": "瓦努阿圖",
111 "Norway": "挪威",
112 "Malawi": "馬拉維",
113 "Benin": "貝寧",
114 "St. Vin. and Gren.": "圣文森特和格林納丁斯",
115 "Korea": "韓國",
116 "Singapore": "新加坡",
117 "Montenegro": "黑山共和國",
118 "Cayman Is.": "開曼群島",
119 "Togo": "多哥",
120 "China": "中國",
121 "Heard I. and McDonald Is.": "赫德島和麥克唐納群島",
122 "Armenia": "亞美尼亞",
123 "Falkland Is.": "馬爾維納斯群島（福克蘭）",
124 "Ukraine": "烏克蘭",
125 "Ghana": "加納",
126 "Tonga": "湯加",
127 "Finland": "芬蘭",
128 "Libya": "利比亞",
129 "Dominican Rep.": "多米尼加",
130 "Indonesia": "印度尼西亞",
131 "Mauritius": "毛里求斯",
132 "Eq. Guinea": "赤道幾內亞",
133 "Sweden": "瑞典",
134 "Vietnam": "越南",
135 "Mali": "馬里",
136 "Russia": "俄羅斯",
137 "Bulgaria": "保加利亞",
138 "United States": "美國",
139 "Romania": "羅馬尼亞",
140 "Angola": "安哥拉",
141 "Chad": "乍得",
142 "South Africa": "南非",
143 "Fiji": "斐濟",
144 "Liechtenstein": "列支敦士登",
145 "Malaysia": "馬來西亞",
146 "Austria": "奧地利",
147 "Mozambique": "莫桑比克",
148 "Uganda": "烏干達",
149 "Japan": "日本本土",
150 "Niger": "尼日爾",
151 "Brazil": "巴西",
152 "Kuwait": "科威特",
153 "Panama": "巴拿馬",
154 "Guyana": "圭亞那",
155 "Madagascar": "馬達加斯加",
156 "Luxembourg": "盧森堡",
157 "American Samoa": "美屬薩摩亞",
158 "Andorra": "安道爾",
159 "Ireland": "愛爾蘭",
160 "Italy": "意大利",
161 "Nigeria": "尼日利亞",
162 "Turks and Caicos Is.": "特克斯和凱科斯群島",
163 "Ecuador": "厄瓜多爾",
164 "U.S. Virgin Is.": "美屬維爾京群島",
165 "Brunei": "文萊",
166 "Australia": "澳大利亞",
167 "Iran": "伊朗",
168 "Algeria": "阿爾及利亞",
169 "El Salvador": "薩爾瓦多",
170 "C?te d'Ivoire": "科特迪瓦",
171 "Chile": "智利",
172 "Puerto Rico": "波多黎各",
173 "Belgium": "比利時",
174 "Thailand": "泰國",
175 "Haiti": "海地",
176 "Iraq": "伊拉克",
177 "S?o Tomé and Principe": "圣多美和普林西比",
178 "Sierra Leone": "塞拉利昂",
179 "Georgia": "格魯吉亞",
180 "Denmark": "丹麥",
181 "Philippines": "菲律賓",
182 "S. Geo. and S. Sandw. Is.": "南喬治亞島和南桑威奇群島",
183 "Moldova": "摩爾多瓦",
184 "Morocco": "摩洛哥",
185 "Namibia": "納米比亞",
186 "Malta": "馬耳他",
187 "Guinea-Bissau": "幾內亞比紹",
188 "Kiribati": "基里巴斯",
189 "Switzerland": "瑞士",
190 "Grenada": "格林納達",
191 "Seychelles": "塞舌爾",
192 "Portugal": "葡萄牙",
193 "Estonia": "愛沙尼亞",
194 "Uruguay": "烏拉圭",
195 "Antigua and Barb.": "安提瓜和巴布達",
196 "Lebanon": "黎巴嫩",
197 "Uzbekistan": "烏茲別克斯坦",
198 "Tunisia": "突尼斯",
199 "Djibouti": "吉布提",
200 "Greenland": "丹麥",
201 "Timor-Leste": "東帝汶",
202 "Dominica": "多米尼克",
203 "Colombia": "哥倫比亞",
204 "Burundi": "布隆迪",
205 "Bosnia and Herz.": "波斯尼亞和黑塞哥維那",
206 "Cyprus": "塞浦路斯",
207 "Barbados": "巴巴多斯",
208 "Qatar": "卡塔爾",
209 "Palau": "帕勞",
210 "Bhutan": "不丹",
211 "Sudan": "蘇丹",
212 "Nepal": "尼泊爾",
213 "Micronesia": "密克羅尼西亞",
214 "Bermuda": "百慕大",
215 "Suriname": "蘇里南",
216 "Venezuela": "委內瑞拉",
217 "Israel": "以色列",
218 "St. Pierre and Miquelon": "圣皮埃爾和密克隆群島",
219 "Central African Rep.": "中非",
220 "Iceland": "冰島",
221 "Zambia": "贊比亞",
222 "Senegal": "塞內加爾",
223 "Papua New Guinea": "巴布亞新幾內亞",
224 "Trinidad and Tobago": "特立尼達和多巴哥",
225 "Zimbabwe": "津巴布韋",
226 "Jordan": "約旦",
227 "Gambia": "岡比亞",
228 "Kazakhstan": "哈薩克斯坦",
229 "Poland": "波蘭",
230 "Eritrea": "厄立特里亞",
231 "Kyrgyzstan": "吉爾吉斯斯坦",
232 "Montserrat": "蒙特塞拉特",
233 "New Caledonia": "新喀里多尼亞",
234 "Macedonia": "馬其頓",
235 "Paraguay": "巴拉圭",
236 "Latvia": "拉脫維亞",
237 "Hungary": "匈牙利",
238 "Syria": "敘利亞",
239 "Honduras": "洪都拉斯",
240 "Myanmar": "緬甸",
241 "Mexico": "墨西哥",
242 "Egypt": "埃及",
243 "Nicaragua": "尼加拉瓜",
244 "Cuba": "古巴",
245 "Serbia": "塞爾維亞",
246 "Comoros": "科摩羅",
247 "United Kingdom": "英國",
248 "Fr. S. Antarctic Lands": "南極洲",
249 "Congo": "剛果（布）",
250 "Greece": "希臘",
251 "Sri Lanka": "斯里蘭卡",
252 "Croatia": "克羅地亞",
253 "Botswana": "博茨瓦納",
254 "Siachen Glacier": "錫亞琴冰川地區"
255 }
256 var option = {
257 title: {
258 text: '全球各國確診情況',
259 // subtext: '累計確診人數（截止至北京時間2020-06-09 08:30）',
260 left: 'center',
261 textStyle: {
262 color: 'white'
263 },
264 top: 'top'
265 },
266 tooltip: {
267 trigger: 'item',
268 formatter: function(params) {
269 var value = https://www.cnblogs.com/rainbow-1/archive/2021/04/09/params.value +'';
270 return params.seriesName + '<br/>' + params.name + ' : ' + value + '人';
271 }
272 },
273 visualMap: {
274 min: 0,
275 max: 1000000,
276 text: ['High', 'Low'],//兩端的文本
277 realtime: false,
278 calculable: false,
279 textStyle: {
280 color: 'white'
281 },
282 color: ['#481380', '#7f78d2', '#efb1ff', '#ffe2ff']
283 },
284 series: [{
285 name: '累計確診人數',
286 type: 'map',
287 mapType: 'world',
288 roam: true,
289 zoom:1.2,
290 itemStyle: {
291 normal: {
292 areaColor: '#f0fcd5',
293 borderColor: 'rgb(0,108,255)',
294 },
295 emphasis: {
296 //地圖里文字的樣式
297 label: {
298 textStyle:{
299 size: 18,
300 },
301 show: true,
302 color: 'black'
303 },
304 areaColor: '#fce8d5'
305 }
306 },
307 nameMap: nameMap,
308 // data:
309 }]
310 };
311 // 把配置和資料給實體物件
312 myChart.setOption(option);
313 var virus = []
314 $.ajax({
315 url: '/table',
316 // type: 'get',
317 // data: {},
318 dataType: 'json',
319 success: function(data) {
320 var num = data.data
321 for (var i = 0; i < num.length; i++) {
322 virus.push({ name: num[i].c_name, value: num[i].confirm })
323 }
324 // myChart.hideLoading()
325 //必須在這里在設定一遍，這里涉及到的問題不太懂，只知道如不再設定，而在ajax外賦值是沒有作用的
326 myChart.setOption({ //加載資料圖表
327 series: [{
328 // 根據名字對應到相應的系列
329 data: virus
330 }]
331 })
332 }
333 })
334 window.addEventListener('resize', function() {
335 myChart.resize()
336 })
337 //實作滑鼠放到地圖上相應表格高亮
338 $.ajax
339 ({
340 async: true,
341 url: "/table",
342 // dataType:"json",
343 success: function (data)
344 {
345 var table_data =https://www.cnblogs.com/rainbow-1/archive/2021/04/09/ data.data;
346 // alert(table_data)
347 for (var i = 0; i < table_data.length; i++) {
348 console.log(table_data[i]);
349 }
350
351 // 移入該區域時，高亮
352 myChart.on('mouseOver', function (params) {
353 console.log(params);//此處寫點擊事件內容
354 for (var i = 0; i < table_data.length; i++) {
355 // data11[i].value="https://www.cnblogs.com/rainbow-1/archive/2021/04/09/0";
356 if (params.name == table_data[i].c_name) {
357 //測驗如果滑鼠放到哪個國家，就彈出哪個國家的名字
358 // alert(params.name)
359 // console.log(params.name);
360 //addressList[i].value="https://www.cnblogs.com/rainbow-1/archive/2021/04/09/1";
361 //選中高亮
362 $("#bd_data").children().eq(i).css("background", "rgba(176, 196, 222,1)")
363 }
364 }
365 });
366 // 移出該區域時，取消高亮
367 myChart.on('mouseOut', function (params) {
368 console.log(params);//此處寫點擊事件內容
369 for (var i = 0; i < table_data.length; i++) {
370 // data11[i].value="https://www.cnblogs.com/rainbow-1/archive/2021/04/09/0";
371 if (params.name == table_data[i].c_name) {
372 //測驗如果滑鼠離開哪個國家，就彈出哪個國家的名字
373 // alert("離開"+params.name)
374 // console.log(params.name);
375 //取消高亮
376 $("#bd_data").children().eq(i).css("background", "rgba(176, 196, 222, 0.1)")
377 }
378 }
379 });
380 //下面控制滑鼠放到表格上地圖高亮
381 // if ("美國" == table_data[i].c_name)
382 // {
383 $("#bd_data").find('tr').mouseenter(function ()
384 {// alert("!!!")\
385 var hang = $(this).prevAll().length;
386 myChart.dispatchAction({type: 'highlight', name: table_data[hang].c_name});//高亮
387 })
388
389 $("#bd_data").find('tr').mouseleave(function ()
390 {
391 var hang = $(this).prevAll().length;
392 myChart.dispatchAction({type: 'downplay', name: table_data[hang].c_name});//取消高亮
393 })
394 // }
395 }
396 })
397
398 /* $.ajax({
399 async: true,
400 url: "/table",
401 // dataType:"json",
402 success: function (data)
403 {
404 var table_data=https://www.cnblogs.com/rainbow-1/archive/2021/04/09/data.data;
405 // 滑鼠移入的第幾行資料
406
407 }
408 })*/
409 })();
410 //查詢js
411 function find_res(){
412 var cname;
413 // $.ajax
414 // ({
415 // method:"post",
416 // url:"http://localhost:8080/PycharmProjects/Cov/templates/world.html?_ijt=q6ulfhihrfp8rqkl8id73svio3",
417 // success:function(data)
418 // {
419 // //form表單資料的轉化，轉化成[ { name: , value: },{ name: , value: } ]
420 // all=$('#find_value').serializeArray()
421 // // console.log(all['cname'])
422 // console.log(all[0])
423 // cname=all[0]['value']
424 // alert(cname)
425 // }
426 // })
427 cname=document.getElementById("cname").value
428 $.ajax(
429 {
430 sync:true,
431 url:"/find_worldByName",
432 data:{name:cname},
433 success:function (data)
434 {
435 table_data=https://www.cnblogs.com/rainbow-1/archive/2021/04/09/data.data;
436 for(var i=0;i<table_data.length;i++)
437 {
438 // console.log(table_data[i]);
439 }
440 var appendHTML = "";
441 if($(".map-table tbody tr").length>0){
442 $(".map-table tbody tr").remove();
443 }
444 // alert(table_data.length)
445 for(var i=0; i<table_data.length; i++)
446 {
447 //分割日期字串
448 strdt=table_data[i][1].split(" ");
449 strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3]
450 appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+
451 strdt+"</td><td>"+
452 table_data[i][2]+"</td><td>"+
453 table_data[i][5]+"</td><td>"+
454 table_data[i][8]+"</td><td>"+
455 table_data[i][9]+"</td><td>"+
456 table_data[i][4]+"</td><td>"+
457 (i+1)+"</td></tr>";
458 $(".map-table tbody").append(appendHTML);
459 }
460 }
461 }
462 )
463 }
flask路由（查詢）
1 #根據國家的名字查詢
2 @app.route("/find_worldByName")
3 def find_worldByName():
4 #獲取用戶傳來的資料
5 res=[]
6 name = request.values.get("name")
7 res=utils.find_worldByName(name)
8 print(res)
9 return jsonify({"data": res})
Tomorrow the birds will sing.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/274667.html
標籤：其他
下一篇：Paxos 協議簡單介紹