Python的flask接收前台的ajax的post数据和get数据的方法


Posted in Python onApril 12, 2021

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方法

使用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参数

Python的flask接收前台的ajax的post数据和get数据的方法

Python的flask接收前台的ajax的post数据和get数据的方法

下面的代码是整个流程实现:ajax:

//查询js
function find_res(){
    var cname;
    var continent;
    // $.ajax
    // ({
    //     method:"post",
    //     url:"http://localhost:8080/PycharmProjects/Cov/templates/world.html?_ijt=q6ulfhihrfp8rqkl8id73svio3",
    //     success:function(data)
    //     {
    //         //form表单数据的转化,转化成[ { name: , value:   },{ name: , value:   } ]
    //         all=$('#find_value').serializeArray()
    //         // console.log(all['cname'])
    //         console.log(all[0])
    //         cname=all[0]['value']
    //         alert(cname)
    //     }
    // })
    cname=document.getElementById("cname").value
    continent=document.getElementById("continent").value
    console.log(cname+continent)
    // alert("表单数据:   "+"国家:"+cname+ "大洲:"+ continent)
    $.ajax
    ({
            // sync:true,
            url:"/find_worldByName",
            // type:'post',
            data:{'cname':cname,'continent':continent},
            success:function (data)
            {
                // alert("!!!")
                table_data=data.data;
                for(var i=0;i<table_data.length;i++)
                {
                // console.log(table_data[i]);
                }
            var appendHTML = "";
        if($(".map-table tbody tr").length>0){
            $(".map-table tbody tr").remove();
        }
        // alert("list长度:"+table_data.length)
        for(var i=0; i<table_data.length; i++)
            {
            //分割日期字符串
            strdt=table_data[i][1].split(" ");
            strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3]
            appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+
            strdt+"</td><td>"+
            table_data[i][2]+"</td><td>"+
            table_data[i][5]+"</td><td>"+
            table_data[i][8]+"</td><td>"+
            table_data[i][9]+"</td><td>"+
            table_data[i][4]+"</td><td>"+
            (i+1)+"</td></tr>";
                $(".map-table tbody").append(appendHTML);
            }
        }
    })
}

前台html:

<table align="center" style="margin:3px"  cellspacing="7px">
                <form id="find_value">
                    <label><font color="#ff7f50">输入国家:</font></label>
                    <input id="cname" type="text" name="cname" placeholder="" value="">

                    <label><font color="#ff7f50">输入大洲:</font></label>
                    <input id="continent" type="text" name="continent" placeholder="" value="">

                    <input type="button" value="查询" onclick="find_res()">
                    <input type="reset" value="重置">
                </form>
                <thead>
                 <tr style="color: #FFB6C1">
                <th>时间</th>
                <th>国家</th>
                <th>累计确诊</th>
                <th>累计治愈</th>
                <th>累计死亡</th>
                <th>现存确诊</th>
                <th>排名</th>
              </tr>
                </thead>
                <tbody id="bd_data">
                </tbody>
            </table>

Python flask路由:

@app.route("/find_worldByName")
def find_worldByName():
    #获取用户传来的数据
    # jsondata = json.loads(request.form.get('jsondata'))
    res=[]
    #get方式
    cname = request.values.get("cname")
    continent = request.values.get("continent")
    #post方式
    # continent = request.form.get("continent")
    # cname = request.form.get("cname")

    # print(cname+continent)
    res=utils.find_worldByName(cname,continent)
    # res = utils.find_worldByName("美国", "")
    # print(res)
    return jsonify({"data": res})

后台获取数据库数据:

def find_worldByName(c_name,continent):
    print(c_name)
    print(continent)
    sql = " SELECT * FROM world WHERE  1=1 "
    if(c_name!=None):
        sql=sql+"AND ( c_name LIKE '%"+c_name+"%' )"
    if(continent!=None):
        sql=sql+" AND ( continent LIKE '%"+continent+"%') "
    sql=sql+" AND dt=(SELECT dt FROM world order by dt desc limit 1) order by confirm desc "

          # "AND continent LIKE '%%%%%s%%%%'" \
          # " order by dt desc " %(c_name,continent)
    # sql_temp = " SELECT * FROM world WHERE c_name LIKE '%"+c_name+"%' "
    res = query(sql)
    list= []
    for i in res:
        # print(i)
        list.append(i)
    return list;
def query(sql,*args):
    """
    通用封装查询
    :param sql:
    :param args:
    :return:返回查询结果 ((),())
    """
    conn , cursor= get_conn()
    print(sql)
    cursor.execute(sql)
    res = cursor.fetchall()
    close_conn(conn , cursor)
    return res

到此这篇关于Python的flask接收前台的ajax的post数据和get数据的方法的文章就介绍到这了,更多相关Python flask接收前台ajax post和get数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python实现的防DDoS脚本
Feb 08 Python
Python实现的一个找零钱的小程序代码分享
Aug 25 Python
用Python实现一个简单的多线程TCP服务器的教程
May 05 Python
详解python单例模式与metaclass
Jan 15 Python
详解使用 pyenv 管理多个版本 python 环境
Oct 19 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
May 04 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
Aug 23 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
Oct 23 Python
python PIL/cv2/base64相互转换实例
Jan 09 Python
python用tkinter实现一个简易能进行随机点名的界面
Sep 27 Python
什么是Python装饰器?如何定义和使用?
Apr 11 Python
Python时间操作之pytz模块使用详解
Jun 14 Python
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
python实现简单反弹球游戏
python中Tkinter 窗口之输入框和文本框的实现
Apr 12 #Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
python 利用 PIL 将数组值转成图片的实现
python实现网络五子棋
python实现简易名片管理系统
Apr 11 #Python
You might like
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
python中assert用法实例分析
2015/04/30 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
使用python3实现操作串口详解
2019/01/01 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python实现人机五子棋
2020/03/25 Python
详解Python 函数参数的拆解
2020/09/02 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
毕业自我评价
2014/02/05 职场文书
毕业证委托书范文
2014/09/26 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
公司回复函格式
2015/07/14 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang