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

Python的flask接收前台的ajax的post数据和get数据的更多相关文章

  1. flask接收前台的ajax的post数据

    html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  2. flask接收前台的form数据

    转自 http://www.cnblogs.com/wanghaonull/p/6340096.html 我主要是想了解 request.form.get('username') 这一部分

  3. Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  4. 使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  5. Flask框架:运用Ajax轮询动态绘图

    Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echa ...

  6. flask与javascript及ajax

    flask与javascript及ajax 1.      flask+js 1.1.    最简单的 最简单的元素信息改变. {% block content %} <h1>我的第一张网 ...

  7. python之Flask实现登录功能

    网站少不了要和数据库打交道,归根到底都是一些增删改查操作,这里做一个简单的用户登录功能来学习一下Flask如何操作MySQL. 用到的一些知识点:Flask-SQLAlchemy.Flask-Logi ...

  8. spring MVC 如何接收前台传入的JSON对象数组并处理

    spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json  即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...

  9. spring MVC 如何接收前台传入的JSON对象数组

    spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json  即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...

随机推荐

  1. VSCode & Node.js & debugger & inspector

    VSCode & Node.js & debugger & inspector F5 ws 元信息 (UUID) ws://127.0.0.1:46912/efa91bda-1 ...

  2. [转]在ROS下使用zeroconf配置多机通信

    原文地址:http://www.corvin.cn/635.html,转载主要方便随时查阅,如有版权要求,请及时联系. 0x00 为何需要配置ROS多机通信 众所周知ROS是分布式系统,因此可以将机器 ...

  3. 1047 Student List for Course ——PAT甲级真题

    1047 Student List for Course Zhejiang University has 40,000 students and provides 2,500 courses. Now ...

  4. Hystrix熔断器的使用步骤

    1.添加熔断器依赖 2.在配置文件中开启熔断器 feign.hystrix.enabled=true 3.写接口的实现类VodFileDegradeFeignClient,在实现类中写如果出错了输出的 ...

  5. 小心你的个人信息——GitHub 热点速览 v.21.09

    作者:HelloGitHub-小鱼干 浏览过必有痕迹,有什么可以抹去社交痕迹的方法呢?social-analyzer 是一个可在 350+ 网站分析特定用户资料的工具,你可以用它来"人肉&q ...

  6. Java RPC 框架 Solon 1.3.9 发布,更便利的支持

    Solon 是一个微型的Java RPC开发框架.项目从2018年启动以来,参考过大量前人作品:历时两年,4000多次的commit:内核保持0.1m的身材,超高的跑分,良好的使用体验.支持:RPC. ...

  7. ajax请求添加自定义header参数

    beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("X-Auth0-Token", g ...

  8. java 入门环境搭建

    Java帝国的诞生 1972年C诞生 1982年C++诞生 1995年JAVA诞生,为了实现真正的跨平台,在操作系统之上又加了抽象层,叫做JAVA的虚拟机,统称JVM 三高问题: 高可用 高性能 高并 ...

  9. MindSpore:基于本地差分隐私的 Bandit 算法

    摘要:本文将先简单介绍Bandit 问题和本地差分隐私的相关背景,然后介绍基于本地差分隐私的 Bandit 算法,最后通过一个简单的电影推荐场景来验证 LDP LinUCB 算法. Bandit问题是 ...

  10. drf给上传图片重命名

    1.先在你项目中添加一个文件夹如:system 在文件夹下添加__init__.py 和storage.py文件,并在storage.py中添加如下代码: #复制代码 -- coding: UTF-8 ...