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

 

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/rainbow-1/p/14643706.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!