Question

我目前正在处理一个处理用户登录的FLASK应用程序。其背后的想法是，当用户输入其登录凭据时，该表单会将其信息发送到API，该API将确定登录是否成功。 API将发送一条消息以显示是否成功。 API和模板页面工作正常，我可以使用jsonify返回消息，但我想将jsonify数据返回到具有我的css设计并扩展了我的“ base.html”的html页面：

我的登录API

def index():
code, message = "ERROR", "Invalid Credentials"
loginid = str(request.form.get('id')) or ''
pw = str(request.form.get('pw')) or ''

if len(loginid) == 0 or len(pw) == 0:
    # Fields not filled
    message = "Please fill in all required fields"
    return jsonify({"code": code, "message": message})


if get_user(loginid, pw):
    # Authentication Sucessful
    code, message = "OK", "Authentication successful."
    regen_session()

    session['auth'] = True
    session['user'] = loginid
    return jsonify({"code": code, "message": message})

# User credentials error
return jsonify({"code": code, "message": message})

有人可以告诉我如何将jsonify对象返回到具有我的html和CSS的页面吗？谢谢您的帮助。

Answer 1

我始终使用JSON数据类型通过javascript在客户端和服务器之间进行通信。

我在这里提供了工作示例：

HTML部分和jquery ajax：

    <input type="text" id="id_field">
    <input type="password" id="pass_field">
    <button type="button" onclick="sendData()">ok</button> 

    <script>
    function sendData (){
    var get_id = document.getElementById("id_field").value
    var get_pass = document.getElementById("pass_field").value

            $.ajax({
                type: "POST",
                url: "{{url_for('index')}}",
                data: JSON.stringify({id: get_id,pw: get_pass}),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function(data){
                    //handle response here      
                },
                error: function(data){
                   //handle errors here
                }
            });
    }
</script>

烧瓶部分：

@app.route('/index', methods=['POST']) 
def index():
    if request.method == 'POST':
        loginid = request.json.get('id')
        pw = request.json.get('pw')

        # do whatever with data then return jsonify data to ajax function

        return jsonify({"code": code, "message": message})

使用CSS将Jsonify返回到html页面

1 个答案: