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获取文件扩展名的方法
Jul 06 Python
python修改字典内key对应值的方法
Jul 11 Python
Python实现SVN的目录周期性备份实例
Jul 17 Python
Python实现邮件的批量发送的示例代码
Jan 23 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
Dec 17 Python
python实现多层感知器
Jan 18 Python
对python中不同模块(函数、类、变量)的调用详解
Jul 16 Python
python 中xpath爬虫实例详解
Aug 26 Python
PyQT5 emit 和 connect的用法详解
Dec 13 Python
Python语法之精妙的十个知识点(装B语法)
Jan 18 Python
Django怎么在admin后台注册数据库表
Nov 14 Python
python解包概念及实例
Feb 17 Python
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
python实现简单反弹球游戏
python中Tkinter 窗口之输入框和文本框的实现
Apr 12 #Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
python 利用 PIL 将数组值转成图片的实现
python实现网络五子棋
python实现简易名片管理系统
Apr 11 #Python
You might like
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php获取url参数方法总结
2014/11/13 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
jquery对元素拖动排序示例
2014/01/16 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python 高阶函数简单介绍
2021/02/19 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
学习党章思想汇报
2014/01/07 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
Java存储没有重复元素的数组
2022/04/29 Java/Android