zoukankan      html  css  js  c++  java
  • Python的flask接收前台的ajax的post数据和get数据

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

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

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

    ajax:
     1 //查询js
     2 function find_res(){
     3     var cname;
     4     var continent;
     5     // $.ajax
     6     // ({
     7     //     method:"post",              
     8     //     url:"http://localhost:8080/PycharmProjects/Cov/templates/world.html?_ijt=q6ulfhihrfp8rqkl8id73svio3",
     9     //     success:function(data)
    10     //     {
    11     //         //form表单数据的转化,转化成[ { name: , value:   },{ name: , value:   } ]
    12     //         all=$('#find_value').serializeArray()
    13     //         // console.log(all['cname'])
    14     //         console.log(all[0])
    15     //         cname=all[0]['value']
    16     //         alert(cname)
    17     //     }
    18     // })
    19     cname=document.getElementById("cname").value
    20     continent=document.getElementById("continent").value
    21     console.log(cname+continent)
    22     // alert("表单数据:   "+"国家:"+cname+ "大洲:"+ continent)
    23     $.ajax
    24     ({
    25             // sync:true,
    26             url:"/find_worldByName",
    27             // type:'post',
    28             data:{'cname':cname,'continent':continent},
    29             success:function (data)
    30             {
    31                 // alert("!!!")
    32                 table_data=data.data;
    33                 for(var i=0;i<table_data.length;i++)
    34                 {
    35                 // console.log(table_data[i]);
    36                 }
    37             var appendHTML = "";
    38         if($(".map-table tbody tr").length>0){
    39             $(".map-table tbody tr").remove();
    40         }
    41         // alert("list长度:"+table_data.length)
    42         for(var i=0; i<table_data.length; i++)
    43             {
    44             //分割日期字符串
    45             strdt=table_data[i][1].split(" ");
    46             strdt=strdt[0]+strdt[1]+strdt[2]+strdt[3]
    47             appendHTML = "<tr align='center' style='color:aquamarine;'><td>"+
    48             strdt+"</td><td>"+
    49             table_data[i][2]+"</td><td>"+
    50             table_data[i][5]+"</td><td>"+
    51             table_data[i][8]+"</td><td>"+
    52             table_data[i][9]+"</td><td>"+
    53             table_data[i][4]+"</td><td>"+
    54             (i+1)+"</td></tr>";
    55                 $(".map-table tbody").append(appendHTML);
    56             }
    57         }
    58     })
    59 }
    前台html:
     1 <table align="center" style="margin:3px"  cellspacing="7px">
     2                 <form id="find_value">
     3                     <label><font color="#ff7f50">输入国家:</font></label>
     4                     <input id="cname" type="text" name="cname" placeholder="" value="">
     5 
     6                     <label><font color="#ff7f50">输入大洲:</font></label>
     7                     <input id="continent" type="text" name="continent" placeholder="" value="">
     8 
     9                     <input type="button" value="查询" onclick="find_res()">
    10                     <input type="reset" value="重置">
    11                 </form>
    12                 <thead>
    13                  <tr style="color: #FFB6C1">
    14                 <th>时间</th>
    15                 <th>国家</th>
    16                 <th>累计确诊</th>
    17                 <th>累计治愈</th>
    18                 <th>累计死亡</th>
    19                 <th>现存确诊</th>
    20                 <th>排名</th>
    21               </tr>
    22                 </thead>
    23                 <tbody id="bd_data">
    24                 </tbody>
    25             </table>
    Python flask路由:
     1 @app.route("/find_worldByName")
     2 def find_worldByName():
     3     #获取用户传来的数据
     4     # jsondata = json.loads(request.form.get('jsondata'))
     5     res=[]
     6     #get方式
     7     cname = request.values.get("cname")
     8     continent = request.values.get("continent")
     9     #post方式
    10     # continent = request.form.get("continent")
    11     # cname = request.form.get("cname")
    12 
    13     # print(cname+continent)
    14     res=utils.find_worldByName(cname,continent)
    15     # res = utils.find_worldByName("美国", "")
    16     # print(res)
    17     return jsonify({"data": res})
    后台获取数据库数据:
     1 def find_worldByName(c_name,continent):
     2     print(c_name)
     3     print(continent)
     4     sql = " SELECT * FROM world WHERE  1=1 "
     5     if(c_name!=None):
     6         sql=sql+"AND ( c_name LIKE '%"+c_name+"%' )"
     7     if(continent!=None):
     8         sql=sql+" AND ( continent LIKE '%"+continent+"%') "
     9     sql=sql+" AND dt=(SELECT dt FROM world order by dt desc limit 1) order by confirm desc "
    10 
    11           # "AND continent LIKE '%%%%%s%%%%'" 
    12           # " order by dt desc " %(c_name,continent)
    13     # sql_temp = " SELECT * FROM world WHERE c_name LIKE '%"+c_name+"%' "
    14     res = query(sql)
    15     list= []
    16     for i in res:
    17         # print(i)
    18         list.append(i)
    19     return list;
    20 
    21 
    22 def query(sql,*args):
    23     """
    24     通用封装查询
    25     :param sql:
    26     :param args:
    27     :return:返回查询结果 ((),())
    28     """
    29     conn , cursor= get_conn()
    30     print(sql)
    31     cursor.execute(sql)
    32     res = cursor.fetchall()
    33     close_conn(conn , cursor)
    34     return res
  • 相关阅读:
    FreeMarker的<#if></#if>标签
    ubuntu的dpkg命令安装和卸载软件
    ubuntu建立软链接注意事项
    halo的工作目录,有一个是在代码里配置的,硬编码了
    Springboot的多环境配置
    idea中的springboot+gradle项目报错springboot configuration annotation processor not found in classpath
    maven中的pom.xml中的scope的作用
    设置idea的快捷键组合 设置为默认
    springboot无法查询到后台的数据
    ssh互信条件下的多机拷贝脚本和执行远程命令
  • 原文地址:https://www.cnblogs.com/rainbow-1/p/14643706.html
Copyright © 2011-2022 走看看