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. js assert

    js assert console.assert The console.assert() method writes an error message to the console if the a ...

  2. 若依管理系统RuoYi-Vue(二):权限系统设计详解

    若依Vue系统中的权限管理部分的功能都集中在了系统管理菜单模块中,如下图所示.其中权限部分主要涉及到了用户管理.角色管理.菜单管理.部门管理这四个部分. 一.若依Vue系统中的权限分类 根据观察,若依 ...

  3. 前端问题录——在导入模块时使用'@'时提示"Modile is not installed"

    前情提要 为了尽可能解决引用其他模块时路径过长的问题,通常会在 vue.config.js 文件中为 src 目录配置一个别名 '@' configureWebpack: { resolve: { a ...

  4. sentry SSRF

    目录 Sentry介绍 exp测试步骤 自己构造blind发包 修复方式 参考 Sentry介绍 Sentry 是一个实时的事件日志和聚合平台,基于 Django 构建.一般在url上.或者logo上 ...

  5. Java练习——抽象类

    需求: 2辆宝马,1辆别克商务舱,1辆金龙(34)座,租5天共多少租金.   轿车 客车(金杯.金龙) 车型 别克商务舱GL8 宝马550i 别克林荫大道 <=16座 >16座 日租费(元 ...

  6. POJ-2752(KMP算法+前缀数组的应用)

    Seek the Name, Seek the Fame POJ-2752 本题使用的算法还是KMP 最主要的片段就是前缀数组pi的理解,这里要求解的纸盒pi[n-1]有关,但是还是需要使用一个循环来 ...

  7. Kibana 插件环境搭建教程

    原文 环境背景, Kibana 7.4.0, Elasticsearch 7.4.0 注意, 执行以下命令时, 尽量在管理员权限的命令行窗口里执行, 避免一些没有权限的报错; 1. 准备 Kibana ...

  8. 助力面试之ConcurrentHashMap面试灵魂拷问,你能扛多久

    目录 前言 ConcurrentHashMap 原理 JDK1.8 版本 ConcurrentHashMap 做了什么改进 为什么 key 和 value 不允许为 null ConcurrentHa ...

  9. WPF 基础 - 控件与布局

    1. 前言 1. 数据驱动 UI WPF 是数据核心.主动的,UI 从属数据并表达数据.是被动的: 不再是 UI 驱动数据,而是数据驱动 UI: 2. 控件的定义 控件.数据内容.行为(控件响应用户操 ...

  10. DDD实战课--学习笔记

    目录 学好了DDD,你能做什么? 领域驱动设计:微服务设计为什么要选择DDD? 领域.子域.核心域.通用域和支撑域:傻傻分不清? 限界上下文:定义领域边界的利器 实体和值对象:从领域模型的基础单元看系 ...