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. HTTPS clone !== SSH clone

    HTTPS clone !== SSH clone https clone bug SSH clone OK testing SSH key https://www.cnblogs.com/xgqfr ...

  2. Mila Fletcher:日常理财应注意的五点

    米拉·弗莱彻于2007年毕业于耶鲁大学,她是一名真正意义上的法学博士,在校期间获得了马歇尔奖学金,毕业后曾在美国多家知名律师事务所任职,目前就职于星盟全球投资公司,专注于帮助公司和客户提供法务咨询,他 ...

  3. NGK发力社区 打造三大社群模式

    当人们谈论区块链.数字货币的时候,常常会提到这样一些词汇:社区.社群,社区对区块链项目乃至于整个区块链行业的重要性已经形成了基本的行业共识,几乎每个项目方都在想尽办法营造社区.激发社区活力. 为什么区 ...

  4. npm与package.json快速入门

    本文转载自npm与package.json快速入门 导语 npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本 ...

  5. ClickHouse源码笔记3:函数调用的向量化实现

    分享一下笔者研读ClickHouse源码时分析函数调用的实现,重点在于分析Clickhouse查询层实现的接口,以及Clickhouse是如何利用这些接口更好的实现向量化的.本文的源码分析基于Clic ...

  6. 安装vue脚手架

    npm install -g @vue/cli 创建项目 vue create freemall

  7. idea配置阿里maven镜像

    首先打开IDEA安装路径下的:"\plugins\maven\lib\maven3\conf\settings.xml" 找到里面的mirror配置,进行修改如下: <mir ...

  8. 下载com.springsource.org.aspectj.weaver-1.6.8.RELEASE.jar

    看别人都说在repo.maven.com下载,没想到竟然要登录 索性我直接在国内阿里云的镜像仓库下载好了,速度又快又方便 搜索aspectj 下载地址:https://maven.aliyun.com ...

  9. 如何把数据放到C#的心里之 DB2实例

    平时偶尔因为工作需要得自己写一些小工具去操作数据库,因为只是需要实现一些小的功能,也不涉及多类型的数据库,也许就是一次性的使用.所以此时那些大而全的数据库操作框架,也就不再那么适合我了.而本篇博文主要 ...

  10. 文件下载:报错The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

    前言:这篇文件下载的后台代码太繁琐,建议参考https://www.cnblogs.com/zwh0910/p/13745947.html 前端: <el-button type="p ...