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 相关文章推荐
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
Aug 16 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
Nov 15 Python
浅谈Django学习migrate和makemigrations的差别
Jan 18 Python
Python实现简单求解给定整数的质因数算法示例
Mar 25 Python
python3+requests接口自动化session操作方法
Oct 13 Python
Selenium定时刷新网页的实现代码
Oct 31 Python
使用python socket分发大文件的实现方法
Jul 08 Python
python 实现目录复制的三种小结
Dec 04 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
Apr 27 Python
Python reduce函数作用及实例解析
May 08 Python
python用分数表示矩阵的方法实例
Jan 11 Python
Pygame游戏开发之太空射击实战敌人精灵篇
Aug 05 Python
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
python实现简单反弹球游戏
python中Tkinter 窗口之输入框和文本框的实现
Apr 12 #Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
python 利用 PIL 将数组值转成图片的实现
python实现网络五子棋
python实现简易名片管理系统
Apr 11 #Python
You might like
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
如何通过Python实现标签云算法
2019/07/02 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
.NET面试题:什么是反射
2016/09/30 面试题
互联网创业计划书的书写步骤
2014/01/28 职场文书
《藏戏》教学反思
2014/02/11 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
横幅标语大全
2014/06/17 职场文书
离婚案件原告代理词
2015/05/23 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers