Daorenne 2023-04-11 21:55 采纳率: 0%
浏览 51

ajax提交表单数据给flask未能页面跳转

初次发帖，最近在学习python与web制作个登陆界面：前端输入用户名和密码，通过ajax提交给flask，结果提交后前端login没有跳转至index页面，但是console有数据；代码如下，请帮忙看看哪块出了问题，不胜感激；

 <form >          
                <input id="name" >
                <br>
                <input id="password" >
                <button type="button" id="btn" >提交</button>
 </form>

var btn=document.getElementById('btn');
var name_1=document.getElementById('name');
var psd_1=document.getElementById('password');

btn.onclick=function () { 
    var name_2=name_1.value
    var psd_2=psd_1.value
    var datas={"name":name_2,"password":psd_2};
    $.ajax({
            type:'post',
            url: '/login',
            data: datas, 
            success: function(data) {
                console.log(datas)},
            error:
                function(data){
                    alert('失败了')
            }                            
    })
}



app=Flask(__name__)
@app.route('/index')
def index():
     return render_template('index.html')

@app.route("/login", methods=['GET','POST'])
def login():
    if request.method =='get':
        return render_template('login.html')
    
    else:
        name=request.form.get('name')     
        psd=request.form.get('password')
        if name=="xxx" and psd=='123':
            return redirect('/index')    
    return render_template('login.html')
        
if __name__=='_main_':
    app.run()
  • 写回答

1条回答 默认 最新

  • 「已注销」 2023-04-11 22:24
    关注

    以下内容部分参考ChatGPT模型：

    
你的问题可能是由于ajax提交表单数据后，没有进行页面跳转导致的。可以尝试在ajax的success回调函数中增加window.location.href = "index.html";语句，实现页面的跳转。具体代码如下所示：

前端html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/login.js"></script>
</head>
<body>
    <form id="login-form">
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" placeholder="Enter username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" placeholder="Enter password" required>
        </div>
        <button type="submit">Login</button>
    </form>
</body>
</html>

前端login.js代码：

$(function() {
    $('#login-form').on('submit', function(event) {
        event.preventDefault();
        $.ajax({
            url: '/login',
            type: 'POST',
            data: $(this).serialize(),
            success: function(data) {
                window.location.href = "index.html";
            },
            error: function(xhr, textStatus, error) {
                console.log(xhr.statusText);
                console.log(textStatus);
                console.log(error);
            }
        });
    });
});

后端flask代码：

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']
    # 验证用户名和密码是否正确，这里省略验证代码
    # 如果验证通过，可以跳转到index页面
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，当提交表单后，ajax请求会发送到flask后端的/login路由，后端会获取用户名和密码，然后进行验证。如果验证成功，会通过redirect函数跳转到index页面。前端ajax的success回调函数会捕捉到成功的响应，并通过window.location.href = "index.html";语句实现页面的跳转。

    如果我的建议对您有帮助、请点击采纳、祝您生活愉快

    评论

报告相同问题？

问题事件

  • 创建了问题 4月11日