html layout:
1 <div class="column"> 2 <div class="panel bl bar1"> 3 <div class="panelFooter"></div> 4 <h2>World epidemic data summary query</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">Enter country:</font></label> 9 <input id="cname" type="text" name="cname" placeholder="" value=""> 10 <input type="button" value="Query" onclick="find_res()"> 11 <input type="reset" value="Reset"> 12 </form> 13 <thead> 14 <tr style="color: #FFB6C1"> 15 <th>Time</th> 16 <th>Country</th> 17 <th>Cumulative confirmed diagnoses</th> 18 <th>Cumulative healing</th> 19 <th>Cumulative deaths</th> 20 <th>Existing diagnosis</th> 21 <th>Ranking</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 layout:
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;
twenty two }
twenty three
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 /* Need to provide content */
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 /* Need to provide content */
49 content: "";
50 right: 0;
51 height: 10px;
52 width: 10px;
53 border-bottom: 2px solid #02a6b5;
54 border-right: 2px solid #02a6b5;
55}
Database query code:
Result type:
[ { } ,{ } ]
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;
Crawling world epidemic data (China’s data has been crawled separately and stored in the database together with world data)
1 """
2 Obtain global epidemic data
3 """
4 def get_world_data():
5 #Crawling Chinese data
6 china_url = 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5 & amp;callback=jQuery34102848205531413024_1584924641755 & amp;_=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 # Output all information
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 # Create session object
22 # session = requests.session()
23 # Request interface
24 # result = session.get('https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist')
25 #Print results
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]) #Convert json object
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 = 'Date:' + d['date'] + '--' + d['continent'] + '--' + d['name'] + '--' + 'New confirmed diagnosis: ' + str(
40 # d['confirmAdd']) + 'Cumulative confirmed diagnoses:' + str(d['confirm']) + 'Cure:' + str(d['heal']) + 'Death:' + 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 + '\
') # Add \
newline display
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) # Change the time format and insert the date into the database
51 #print(dt)
52 c_name=i['name'] #Country
53 continent=i['continent'] #Continent
54 nowConfirm=i['nowConfirm'] #Existing confirmed diagnosis
55 confirm=i['confirm'] #Cumulative confirmed diagnosis
56 confirmAdd=i['confirmAdd'] #Add new confirmation
57 suspect=i['suspect'] #Existing suspicion
58 heal=i['heal'] #Cumulative cure
59 dead=i['dead'] #Cumulative death
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) # Change the time format and insert the date into the database
84 world["China"] = {<!-- -->'dt': dt,
85 'continent': "Asia",
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 Update world table
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)' #Compare the current maximum timestamp
112 cursor.execute(sql_query,dic['United States']['dt'])
113 print(dic['United States']['dt'])
114 if not cursor.fetchone()[0]:
115 print(f"{time.asctime()} starts inserting world data")
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() # Submit transaction
122 print(f"{time.asctime()} insertion of world data completed")
123 else:
124 print(f"{time.asctime()} world data is the latest data!")
125 except:
126 traceback.print_exc()
127 finally:
128 close_conn(conn, cursor)
Backend js code (control chart linkage, assign values to tables and query functions)
1 //Add data to the table
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 //Split date string
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 //Map module
38 (function() {
39 var myChart = echarts.init(document.querySelector('.map .chart'))
40 var nameMap = {
41 "Canada": "Canada",
42 "Turkmenistan": "Turkmenistan",
43 "Saint Helena": "Saint Helena",
44 "Lao PDR": "Laos",
45 "Lithuania": "Lithuania",
46 "Cambodia": "Cambodia",
47 "Ethiopia": "Ethiopia",
48 "Faeroe Is.": "Faroe Islands",
49 "Swaziland": "Swaziland",
50 "Palestine": "Palestine",
51 "Belize": "Belize",
52 "Argentina": "Argentina",
53 "Bolivia": "Bolivia",
54 "Cameroon": "Cameroon",
55 "Burkina Faso": "Burkina Faso",
56 "Aland": "?land Islands",
57 "Bahrain": "Bahrain",
58 "Saudi Arabia": "Saudi Arabia",
59 "Fr. Polynesia": "French Polynesia",
60 "Cape Verde": "Cape Verde",
61 "W. Sahara": "Western Sahara",
62 "Slovenia": "Slovenia",
63 "Guatemala": "Guatemala",
64 "Guinea": "Guinea",
65 "Dem. Rep. Congo": "DRC",
66 "Germany": "Germany",
67 "Spain": "Spain",
68 "Liberia": "Liberia",
69 "Netherlands": "Netherlands",
70 "Jamaica": "Jamaica",
71 "Solomon Is.": "Solomon Islands",
72 "Oman": "Oman",
73 "Tanzania": "Tanzania",
74 "Costa Rica": "Costa Rica",
75 "Isle of Man": "Isle of Man",
76 "Gabon": "Gabon",
77 "Niue": "Niue",
78 "Bahamas": "Bahamas",
79 "New Zealand": "New Zealand",
80 "Yemen": "Yemen",
81 "Jersey": "Jersey",
82 "Pakistan": "Pakistan",
83 "Albania": "Albania",
84 "Samoa": "Samoa",
85 "Czech Rep.": "Czech Republic",
86 "United Arab Emirates": "United Arab Emirates",
87 "Guam": "Guam",
88 "India": "India",
89 "Azerbaijan": "Azerbaijan",
90 "N. Mariana Is.": "Northern Mariana Islands",
91 "Lesotho": "Lesotho",
92 "Kenya": "Kenya",
93 "Belarus": "Belarus",
94 "Tajikistan": "Tajikistan",
95 "Turkey": "Türkiye",
96 "Afghanistan": "Afghanistan",
97 "Bangladesh": "Bangladesh",
98 "Mauritania": "Mauritania",
99 "Dem. Rep. Korea": "North Korea",
100 "Saint Lucia": "Saint Lucia",
101 "Br. Indian Ocean Ter.": "British Indian Ocean Territory",
102 "Mongolia": "Mongolia",
103 "France": "France",
104 "Cura?ao": "Cura?ao",
105 "S. Sudan": "South Sudan",
106 "Rwanda": "Rwanda",
107 "Slovakia": "Slovakia",
108 "Somalia": "Somalia",
109 "Peru": "Peru",
110 "Vanuatu": "Vanuatu",
111 "Norway": "Norway",
112 "Malawi": "Malawi",
113 "Benin": "Benin",
114 "St. Vin. and Gren.": "St. Vincent and the Grenadines",
115 "Korea": "South Korea",
116 "Singapore": "Singapore",
117 "Montenegro": "Montenegro",
118 "Cayman Is.": "Cayman Islands",
119 "Togo": "Togo",
120 "China": "中国",
121 "Heard I. and McDonald Is.": "Heard I. and McDonald Is.",
122 "Armenia": "Armenia",
123 "Falkland Is.": "Malvinas Islands (Falkland)",
124 "Ukraine": "Ukraine",
125 "Ghana": "Ghana",
126 "Tonga": "Tonga",
127 "Finland": "Finland",
128 "Libya": "Libya",
129 "Dominican Rep.": "Dominican",
130 "Indonesia": "Indonesia",
131 "Mauritius": "Mauritius",
132 "Eq. Guinea": "Equatorial Guinea",
133 "Sweden": "Sweden",
134 "Vietnam": "Vietnam",
135 "Mali": "Mali",
136 "Russia": "Russia",
137 "Bulgaria": "Bulgaria",
138 "United States": "United States",
139 "Romania": "Romania",
140 "Angola": "Angola",
141 "Chad": "Chad",
142 "South Africa": "South Africa",
143 "Fiji": "Fiji",
144 "Liechtenstein": "Liechtenstein",
145 "Malaysia": "Malaysia",
146 "Austria": "Austria",
147 "Mozambique": "Mozambique",
148 "Uganda": "Uganda",
149 "Japan": "Japanese mainland",
150 "Niger": "Niger",
151 "Brazil": "Brazil",
152 "Kuwait": "Kuwait",
153 "Panama": "Panama",
154 "Guyana": "Guyana",
155 "Madagascar": "Madagascar",
156 "Luxembourg": "Luxembourg",
157 "American Samoa": "American Samoa",
158 "Andorra": "Andorra",
159 "Ireland": "Ireland",
160 "Italy": "Italy",
161 "Nigeria": "Nigeria",
162 "Turks and Caicos Is.": "Turks and Caicos Islands",
163 "Ecuador": "Ecuador",
164 "U.S. Virgin Is.": "U.S. Virgin Islands",
165 "Brunei": "Brunei",
166 "Australia": "Australia",
167 "Iran": "Iran",
168 "Algeria": "Algeria",
169 "El Salvador": "El Salvador",
170 "C?te d'Ivoire": "C?te d'Ivoire",
171 "Chile": "Chile",
172 "Puerto Rico": "Puerto Rico",
173 "Belgium": "Belgium",
174 "Thailand": "Thailand",
175 "Haiti": "Haiti",
176 "Iraq": "Iraq",
177 "S?o Tomé and Principe": "S?o Tomé and Principe",
178 "Sierra Leone": "Sierra Leone",
179 "Georgia": "Georgia",
180 "Denmark": "Denmark",
181 "Philippines": "Philippines",
182 "S. Geo. and S. Sandw. Is.": "South Georgia and the South Sandwich Islands",
183 "Moldova": "Moldova",
184 "Morocco": "Morocco",
185 "Namibia": "Namibia",
186 "Malta": "Malta",
187 "Guinea-Bissau": "Guinea-Bissau",
188 "Kiribati": "Kiribati",
189 "Switzerland": "Switzerland",
190 "Grenada": "Grenada",
191 "Seychelles": "Seychelles",
192 "Portugal": "Portugal",
193 "Estonia": "Estonia",
194 "Uruguay": "Uruguay",
195 "Antigua and Barb.": "Antigua and Barbuda",
196 "Lebanon": "Lebanon",
197 "Uzbekistan": "Uzbekistan",
198 "Tunisia": "Tunisia",
199 "Djibouti": "Djibouti",
200 "Greenland": "Denmark",
201 "Timor-Leste": "East Timor",
202 "Dominica": "Dominica",
203 "Colombia": "Colombia",
204 "Burundi": "Burundi",
205 "Bosnia and Herz.": "Bosnia and Herzegovina",
206 "Cyprus": "Cyprus",
207 "Barbados": "Barbados",
208 "Qatar": "Qatar",
209 "Palau": "Palau",
210 "Bhutan": "Bhutan",
211 "Sudan": "Sudan",
212 "Nepal": "Nepal",
213 "Micronesia": "Micronesia",
214 "Bermuda": "Bermuda",
215 "Suriname": "Suriname",
216 "Venezuela": "Venezuela",
217 "Israel": "Israel",
218 "St. Pierre and Miquelon": "St. Pierre and Miquelon",
219 "Central African Rep.": "Central African",
220 "Iceland": "Iceland",
221 "Zambia": "Zambia",
222 "Senegal": "Senegal",
223 "Papua New Guinea": "Papua New Guinea",
224 "Trinidad and Tobago": "Trinidad and Tobago",
225 "Zimbabwe": "Zimbabwe",
226 "Jordan": "Jordan",
227 "Gambia": "Gambia",
228 "Kazakhstan": "Kazakhstan",
229 "Poland": "Poland",
230 "Eritrea": "Eritrea",
231 "Kyrgyzstan": "Kyrgyzstan",
232 "Montserrat": "Montserrat",
233 "New Caledonia": "New Caledonia",
234 "Macedonia": "Macedonia",
235 "Paraguay": "Paraguay",
236 "Latvia": "Latvia",
237 "Hungary": "Hungary",
238 "Syria": "Syria",
239 "Honduras": "Honduras",
240 "Myanmar": "Myanmar",
241 "Mexico": "Mexico",
242 "Egypt": "Egypt",
243 "Nicaragua": "Nicaragua",
244 "Cuba": "Cuba",
245 "Serbia": "Serbia",
246 "Comoros": "Comoros",
247 "United Kingdom": "UK",
248 "Fr. S. Antarctic Lands": "Antarctica",
249 "Congo": "Congo (Brazzaville)",
250 "Greece": "Greece",
251 "Sri Lanka": "Sri Lanka",
252 "Croatia": "Croatia",
253 "Botswana": "Botswana",
254 "Siachen Glacier": "Siachen Glacier Region"
255 }
256 var option = {
257 title: {
258 text: 'Diagnosis situation in various countries around the world',
259 // subtext: 'Cumulative number of confirmed cases (as of 2020-06-09 08:30 Beijing time)',
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'],//Text at both ends
277 realtime: false,
278 calculable: false,
279 textStyle: {
280 color: 'white'
281},
282 color: ['#481380', '#7f78d2', '#efb1ff', '#ffe2ff']
283},
284 series: [{
285 name: 'Cumulative number of confirmed cases',
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 //Style of text in the map
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 // Give configuration and data to instance object
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 //It must be set again here. I don’t understand the issues involved here. I only know that if you don’t set it again, assigning values outside ajax will have no effect.
326 myChart.setOption({ //Load data chart
327 series: [{
328 // Correspond to the corresponding series according to the name
329 data: virus
330 }]
331 })
332 }
333 })
334 window.addEventListener('resize', function() {
335 myChart.resize()
336 })
337 //Realize the highlighting of the corresponding table when the mouse is placed on the map
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 // Highlight when moving into this area
352 myChart.on('<strong>mouseOver</strong>', function (params) {
353 console.log(params);//Write the click event content here
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 //Test if the mouse is placed on a country, the name of the country will pop up.
358 // alert(params.name)
359 // console.log(params.name);
360 //addressList[i].value="1";
361 //Select highlight
362 $("#bd_data").children().eq(i).css("background", "rgba(176, 196, 222,1)")
363 }
364 }
365 });
366 //Cancel the highlight when moving out of the area
367 myChart.on('<strong>mouseOut</strong>', function (params) {
368 console.log(params);//Write the click event content here
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 //Test if the mouse leaves a country, the name of that country will pop up
373 // alert("leave" + params.name)
374 // console.log(params.name);
375 //Cancel highlighting
376 $("#bd_data").children().eq(i).css("background", "rgba(176, 196, 222, 0.1)")
377 }
378 }
379 });
380 // Below, control the mouse and place it on the table to highlight the map.
381 // if ("United States" == table_data[i].c_name)
382 // {<!-- -->
383 $("#bd_data").find('tr').<strong>mouseenter</strong>(function ()
384 {<!-- -->// alert("!!!")\
385 var hang = $(this).prevAll().length;
386 myChart.dispatchAction({type: 'highlight', name: table_data[hang].c_name});//Highlight
387 })
388
389 $("#bd_data").find('tr').<strong>mouseleave</strong>(function ()
390 {
391 var hang = $(this).prevAll().length;
392 myChart.dispatchAction({type: 'downplay', name: table_data[hang].c_name});//Cancel highlighting
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 // Which row of data the mouse moves into
406
407 }
408 })*/
409 })();
410 //Query 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 // //Conversion of form form data into [ { 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 <strong>cname=document.getElementById("cname").value
</strong>428 $.ajax(
429 {
430 sync: true,
431<strong>url:"/find_worldByName",
</strong>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 //Split date string
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 <strong>table_data[i][2]</strong> + "</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 routing (query)
1 #Query based on the name of the country
2 @app.route("/find_worldByName")
3 def find_worldByName():
4 #Get the data sent by the user
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.