zoukankan      html  css  js  c++  java
  • Flask(python web) 处理表单和Ajax请求

    1.处理表单(form)

    首先,编一个简单的html登录页面(名字为login.html(根路由jinjia2模板指定)):

    <html>
    <head>
          <meta charset="UTF_8">
          <meat lang="zh">
    </head>
    <body>
    <form method="post" action="{{ url_for('login') }}">         //url_for函数指定提交后交给 login路由 处理
        <input type="username" id="username">
        <input type="password" id="password">
        <input type="submit" >登录</input>
    </form>
    </body>
    </html>

    2.因为是用的python web的flask,所以需要修改一下app.py文件

    from flask import Flask, render_template
    
    @app.route('/')
    def index():
        return render_template('login.html')        //执行程序后,输入127.0.0.1:5000/  访问的是login.html文件
                                                    //即上文写的登录文件
    
    @app.route('/login/', endpoint='login', methods=['POST','GET'])    //此处就是上文提到的login路由
    def login():
        response = jsonify({'ret': True, 'msg': '登录成功!'})
        response.status_code = 200
    
        return  response

    2.处理Ajax请求

     html中的ajax请求代码:

    $.ajax({
        url: "{{ url_for('login') }}",
        type: "post",
        async: true,
        data: JSON.stringify({'username': 'admin', 'password': 'admin'}),
        processData: false,
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            alert('登录成功!');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('登录失败!');
        }
    });

    flask 后台处理代码:

    @app.route('/login/', endpoint='login', methods=['POST','GET'])    //此处就是上文提到的login路由
    def login():
        response = jsonify({'ret': True, 'msg': '登录成功!'})
        response.status_code = 200

        return  response

    作者:蓝月

    -------------------------------------------

    个性签名:能我之人何其多,戒骄戒躁,脚踏实地地走好每一步

  • 相关阅读:
    cors解决跨域
    神经网络和keras
    tensorflow笔记
    5.聚类算法-kmeans
    4.回归类算法-目标值连续型
    3.分类算法-目标值离散型
    Phaser.js开发小游戏之洋葱头摘星星
    VS Code 插件之 vscode-debug-visualizer
    Phaser.js开发小游戏之Phaser.js介绍
    微信小程序中写threejs系列之 threejs-miniprogram
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700609.html
Copyright © 2011-2022 走看看