ajax向后臺發送資料：
①post方式
ajax:
@app.route("/find_worldByName",methods=['POST'])
type:'post',
data:{'cname':cname,'continent':continent},
這是post方式傳值
那么在后臺接收就是：(使用request的form方法）
continent = request.form.get("continent")
cname = request.form.get("cname")
②get方式（url引數）
使用request的values方法
data:{'cname':cname,'continent':continent},
name=request.values.get("cname")
總結：
這兩種的區別就是資料在ajax data里的發送方式不同（get和post），所以在后臺接收的時候也會不同，
使用request.form.get 方式獲取的是一個json字串（在這個方法會自動轉化json物件，可以直接用key訪問）
使用request.values.get 方式獲取的是通過url傳遞的get引數
下面的代碼是整個流程實作：
ajax：
1 //查詢js
2 function find_res(){
3 var cname;
4 var continent;
5 // $.ajax
6 // ({
7 // method:"post",
8 // url:"http://localhost:8080/PycharmProjects/Cov/templates/world.html?_ijt=q6ulfhihrfp8rqkl8id73svio3",
9 // success:function(data)
10 // {
11 // //form表單資料的轉化，轉化成[ { name: , value: },{ name: , value: } ]
12 // all=$('#find_value').serializeArray()
13 // // console.log(all['cname'])
14 // console.log(all[0])
15 // cname=all[0]['value']
16 // alert(cname)
17 // }
18 // })
19 cname=document.getElementById("cname").value
20 continent=document.getElementById("continent").value
21 console.log(cname+continent)
22 // alert("表單資料: "+"國家："+cname+ "大洲："+ continent)
23 $.ajax
24 ({
25 // sync:true,
26 url:"/find_worldByName",
27 // type:'post',
28 data:{'cname':cname,'continent':continent},
29 success:function (data)
30 {
31 // alert("!!!")
32 table_data=https://www.cnblogs.com/rainbow-1/archive/2021/04/11/data.data;
33 for(var i=0;i<table_data.length;i++)
34 {
35 // console.log(table_data[i]);
36 }
37 var appendHTML = "";
38 if($(".map-table tbody tr").length>0){
39 $(".map-table tbody tr").remove();
40 }
41 // alert("list長度："+table_data.length)
42 for(var i=0; i<table_data.length; i++)
43 {
44 //分割日期字串
45 strdt=table_data[i][1].split(" ");
46 strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3]
47 appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+
48 strdt+"</td><td>"+
49 table_data[i][2]+"</td><td>"+
50 table_data[i][5]+"</td><td>"+
51 table_data[i][8]+"</td><td>"+
52 table_data[i][9]+"</td><td>"+
53 table_data[i][4]+"</td><td>"+
54 (i+1)+"</td></tr>";
55 $(".map-table tbody").append(appendHTML);
56 }
57 }
58 })
59 }
前臺html：
1 <table align="center" style="margin:3px" cellspacing="7px"> 2 <form id="find_value"> 3 <label><font color="#ff7f50">輸入國家：</font></label> 4 <input id="cname" type="text" name="cname" placeholder="" value=""> 5 6 <label><font color="#ff7f50">輸入大洲：</font></label> 7 <input id="continent" type="text" name="continent" placeholder="" value=""> 8 9 <input type="button" value="查詢" onclick="find_res()"> 10 <input type="reset" value="重置"> 11 </form> 12 <thead> 13 <tr style="color: #FFB6C1"> 14 <th>時間</th> 15 <th>國家</th> 16 <th>累計確診</th> 17 <th>累計治愈</th> 18 <th>累計死亡</th> 19 <th>現存確診</th> 20 <th>排名</th> 21 </tr> 22 </thead> 23 <tbody id="bd_data"> 24 </tbody> 25 </table>
Python flask路由：
1 @app.route("/find_worldByName")
2 def find_worldByName():
3 #獲取用戶傳來的資料
4 # jsondata = https://www.cnblogs.com/rainbow-1/archive/2021/04/11/json.loads(request.form.get('jsondata'))
5 res=[]
6 #get方式
7 cname = request.values.get("cname")
8 continent = request.values.get("continent")
9 #post方式
10 # continent = request.form.get("continent")
11 # cname = request.form.get("cname")
12
13 # print(cname+continent)
14 res=utils.find_worldByName(cname,continent)
15 # res = utils.find_worldByName("美國", "")
16 # print(res)
17 return jsonify({"data": res})
后臺獲取資料庫資料：
1 def find_worldByName(c_name,continent):
2 print(c_name)
3 print(continent)
4 sql = " SELECT * FROM world WHERE 1=1 "
5 if(c_name!=None):
6 sql=sql+"AND ( c_name LIKE '%"+c_name+"%' )"
7 if(continent!=None):
8 sql=sql+" AND ( continent LIKE '%"+continent+"%') "
9 sql=sql+" AND dt=(SELECT dt FROM world order by dt desc limit 1) order by confirm desc "
10
11 # "AND continent LIKE '%%%%%s%%%%'" \
12 # " order by dt desc " %(c_name,continent)
13 # sql_temp = " SELECT * FROM world WHERE c_name LIKE '%"+c_name+"%' "
14 res = query(sql)
15 list= []
16 for i in res:
17 # print(i)
18 list.append(i)
19 return list;
20
21
22 def query(sql,*args):
23 """
24 通用封裝查詢
25 :param sql:
26 :param args:
27 :return:回傳查詢結果 （（），（））
28 """
29 conn , cursor= get_conn()
30 print(sql)
31 cursor.execute(sql)
32 res = cursor.fetchall()
33 close_conn(conn , cursor)
34 return res
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/274985.html
標籤：其他
下一篇：Springboot學習筆記