zoukankan      html  css  js  c++  java
  • flask中使用ajax 处理前端GET请求 弹框展示

    之前写过一篇 处理post请求,今天遇到get的,有些参数处理不一样

    post请求的地址:

    https://www.cnblogs.com/whycai/p/10914349.html

    get效果:

    不一样的地方:

    一、js中改成 get,数据处理不一样

    二、后端拿到前端传的值不一样

    form.get 改成 args.get

    methods 换成 GET

    完整的如下:

    1.html(不变)

     1 <html>
     2 <head></head>
     3 <body>
     4 <form class="formXXX1" >
     5 <br class="formXXX2" />
     6 <div class="form-group">
     7 <label for="
     8 telephone14">手机号: <input class="form1" type="iphone" id="a" name="a" maxlength="11" placeholder="请输入11位合法手机号" /> </label>
     9 </div>
    10 <div class="example-box">
    11 <label>&nbsp;环境:</label>
    12 <label class="radio"> <input type="radio" id="b" name="b" value="0" checked="" /><span>b1</span> </label>
    13 <label class="radio"> <input type="radio" id="b" name="b" value="1" /><span>b2</span> </label>
    14 </div>
    15 <br />
    16 <div class="form-group">
    17 <button class="btn btn-primary" type="button" id="notify">提交</button>
    18 </div>
    19 </form>
    20 </body>
    21 </html>

    2.js

     1 //js文件根据实际路径填写
     2 <script type="text/javascript" src="static/js/jquery.min.js"></script>
     3 
     4 <script type = "text/javascript" >
     5 $('#notify').on('click',
     6 function() {
     7 //取变量
     8 var b= $("input[name='b']:checked").val(); //单选框取值
     9 var a= $('#a').val();
    10 
    11 
    12 //小于11位提示
    13 if (a.length != 11) {
    14 alert('手机号小于11位,请重新输入');
    15 return;
    16 }
    17 
    18  //ajax 提交数据
    19 
    20 $.ajax({
    21 type: "GET",
    22 dataType: "json",
    23 url: "/aaa",//后端请求
    24 data: {a:a,b:b},
    25 success: function(result) {
    26 console.log(result);
    27 {
    28 alert('3333' + result);
    29 }
    30 },
    31 error: function (result) {
    32 console.log(result);
    33 {
    34 alert(result);
    35 }
    36 }
    37 });
    38 
    39 })
    40 
    41 </script>

    python:

    1 @app.route('/aaa',methods=['GET'])
    2 def aaa():
    3     a = request.args.get('a')
    4     b = request.args.get('b')
    5     print (a,b)
    6     # msg = bbb(a, b)#调用 bbb方法拿返回值
    7     msg =a,b
    8     return jsonify(msg)
  • 相关阅读:
    网络-路由交换-路由基础-华为-OSPF的工作原理
    网络-路由交换-路由基础-华为-OSPF报文
    常见协议端口号和IP地址
    以太网帧类型速查(协议字段)
    TCP/UDP端口列表
    利用python生成简单的爆破字典
    BUU的三道文件包含题
    Poc、Exp、Payload、Shellcode的区别
    JavaScript Dom操作-增删改节点1
    JavaScript 图片轮播
  • 原文地址:https://www.cnblogs.com/whycai/p/12112045.html
Copyright © 2011-2022 走看看