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实现从web抓取文档的方法
Sep 26 Python
python实现telnet客户端的方法
Apr 15 Python
Python实现的数据结构与算法之快速排序详解
Apr 22 Python
在Windows中设置Python环境变量的实例讲解
Apr 28 Python
Python切片索引用法示例
May 15 Python
Python字典中的键映射多个值的方法(列表或者集合)
Oct 17 Python
python的schedule定时任务模块二次封装方法
Feb 19 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
Jun 17 Python
使用python绘制cdf的多种实现方法
Feb 25 Python
python3 中使用urllib问题以及urllib详解
Aug 03 Python
Python matplotlib模块及柱状图用法解析
Aug 10 Python
详解python模块pychartdir安装及导入问题
Oct 22 Python
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
python实现简单反弹球游戏
python中Tkinter 窗口之输入框和文本框的实现
Apr 12 #Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
python 利用 PIL 将数组值转成图片的实现
python实现网络五子棋
python实现简易名片管理系统
Apr 11 #Python
You might like
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
英国计算机商店:Technextday
2019/12/28 全球购物
超市营业员岗位职责
2013/12/20 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
小学开学典礼主持词
2014/03/19 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
学前班学生评语
2014/12/29 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
2015年电工工作总结
2015/04/10 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
Java 定时任务技术趋势简介
2022/05/04 Java/Android