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=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 = 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