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 class="chart"></div>-->
28 <!-- <div class="panelFooter"></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 /* 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 = 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 = 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 + '
') # 加
换行显示
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=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 = 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 = 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="0";
356 if (params.name == table_data[i].c_name) {
357 //测试如果鼠标放到哪个国家，就弹出哪个国家的名字
358 // alert(params.name)
359 // console.log(params.name);
360 //addressList[i].value="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="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=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=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.