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

    菜小鱼初次使用 ajax,想前端提交数据,后端处理后,将结果以弹框的形式展示,在网上查看了好多,不停的调试,终于调通了

    html:

     1 <html>
     2 <head></head>
     3 <body>
     4 <form class="formXXX1" method="post">
     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>

    js:

     1 //路径根据实际路径填写
     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 var data = {
    11 data: JSON.stringify({
    12 'a': a,
    13 'b': b
    14 }),
    15 }
    16 
    17 //小于11位提示
    18 if (a.length != 11) {
    19 alert('手机号小于11位,请重新输入');
    20 return;
    21 }
    22 
    23  //ajax 提交数据
    24 
    25 $.ajax({
    26 type: "POST",
    27 dataType: "json",
    28 url: "/aaa",//后端请求
    29 data: data,
    30 success: function(result) {
    31 console.log(result);
    32 {
    33 alert('3333' + result);
    34 }
    35 },
    36 error: function (result) {
    37 console.log(result);
    38 {
    39 alert(result);
    40 }
    41 }
    42 });
    43 
    44 })
    45 
    46 </script>

    flask:

    1 @app.route('/aaa',methods=['POST'])
    2 def aaa():
    3     data = json.loads(request.form.get('data'))
    4     a= data['a']
    5     b= data['b']
    6     print (a,b)
    7     # msg = bbb(a, b)#调用 bbb方法拿返回值
    8     msg =a,b
    9     return jsonify(msg)

    图例:

    参考:博文https://www.cnblogs.com/wanghaonull/p/6340491.html

  • 相关阅读:
    [四天学会ajax]JavaScript 和 Ajax 发出异步请求
    Visual studio 2010 中文版正式版无法安装Silverlight4 Tools的解决办法
    第一范式,第二范式,第三范式
    [四天学会ajax]利用 DOM 进行 Web 响应
    input 提示功能 CSS
    Asp.net中,从弹出窗体取选择值(转)
    WCF 学习笔记(二)
    网络流量监控程序
    VC.net 2005 中CString转成char *
    WCF 学习笔记(一)
  • 原文地址:https://www.cnblogs.com/whycai/p/10914349.html
Copyright © 2011-2022 走看看