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 相关文章推荐
linux环境下安装pyramid和新建项目的步骤
Nov 27 Python
Python读取ini文件、操作mysql、发送邮件实例
Jan 01 Python
python搭建虚拟环境的步骤详解
Sep 27 Python
Python标准库sched模块使用指南
Jul 06 Python
tf.truncated_normal与tf.random_normal的详细用法
Mar 05 Python
python中验证码连通域分割的方法详解
Jun 04 Python
python使用原始套接字发送二层包(链路层帧)的方法
Jul 22 Python
Python 日期区间处理 (本周本月上周上月...)
Aug 08 Python
python实现一个点绕另一个点旋转后的坐标
Dec 04 Python
Jupyter Notebook 实现正常显示中文和负号
Apr 24 Python
Python基础知识之变量的详解
Apr 14 Python
Python初识逻辑与if语句及用法大全
Aug 07 Python
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
python实现简单反弹球游戏
python中Tkinter 窗口之输入框和文本框的实现
Apr 12 #Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
python 利用 PIL 将数组值转成图片的实现
python实现网络五子棋
python实现简易名片管理系统
Apr 11 #Python
You might like
php递归列出所有文件和目录的代码
2008/09/10 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php下Memcached入门实例解析
2015/01/05 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python实现中文文本分句的例子
2019/07/15 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python实现把类当做字典来访问
2019/12/16 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
利用python实现汉诺塔游戏
2021/03/01 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
2014年团总支工作总结
2014/11/21 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技