Question

我制作了一个允许用户登录的脚本我使用了python flask microframework jquery但问题是，如果我填写字段用户和密码，它将没有通往另一个页面，我已经在方法中指定了如果数据是loginuser correctent。第二个问题是网址中的appraition数据。

login1.html

<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>login</title>
<link href="static/css/style.css" rel="stylesheet">
<script src="static/js/jquery-1.9.0.js"></script>
<script src="static/js/script.js"></script>
</head>
<body>
<div class="container">
    <section id="content">
        <form class="form-signin" role="form">
            <h1>Login Form</h1>
            <div> 

                <input type="text" id="txtUsername" placeholder="Username" name="username"  required autofocus>
                                <input type="password" id="txtPassword" placeholder="Password" name="password" required autofocus>
                               <input class="btn btn-default" type="submit" value="Login">

                      </div>
        </form><!-- form -->
        {% if error %}
                    <p class="error"><strong>Error:</strong> {{ error }}
                {% endif %}
    </section><!-- content -->

</div><!-- container -->
</body>
</html>

$(function(){
    $('submit').click(function(){

                var user = $('#txtUsername').val();
        var pass = $('#txtPassword').val();
        $.ajax({
            url: '/loginuser',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response){
                console.log(response);
            },
            error: function(error){
                console.log(error);
            }
        });
    });
});

这个script.js。和app.py

@APP.route('/login')
def login1():

      return render_template('login1.html')


# route for handling the login page logic

@APP.route('/loginuser', methods=['POST'])
def login():

    error = None
    con = mdb.connect('localhost','testuser', 'test623', 'secure')
    #con= mdb.connect(host="x.x.x.x", port=3306, passwd="root", db="se")
    cur = con.cursor()
    cur.execute("SELECT * FROM ADMIN")
    rows = cur.fetchall()
    login=False
    ########recuperer la liste des admin de la BD ADMIN
    for row in rows:
             if request.form['username'] == row[0] and  request.form['password'] == row[1]:
                login=True


    con.close
    if login ==False:
             error = 'Invalid Credentials. Please try again.'
             return render_template('login1.html', error=error)

    else:
             return render_template('mon.html', error=error)

Answer 1

据我了解这个问题，你不应该在这里使用AJAX。使用AJAX时，您不会被重定向到由

呈现的新页面

@APP.route('/loginuser', methods=['POST'])
def login():
   ...

您宁愿在AJAX响应中获取此页面，也可以在success回调（第一个参数）中访问它。

如果您想在这里使用AJAX，您应该将login响应更改为可以由JavaScript方便地使用的内容，例如JSON响应，其中包含登录尝试结果。像

这样的东西

{
    "result": "success",
    "details": "User has been successfully logged in"
}

或

{
    "result": "error",
    "details": "Login or password is incorrect"
}

您应该返回此JSON而不是您的登录表单模板

（而不是这个）

         return render_template('login1.html', error=error)

然后在成功/错误回调中解析它，并决定如何向用户显示此信息。

$(function(){
    $('submit').click(function(){

                var user = $('#txtUsername').val();
        var pass = $('#txtPassword').val();
        $.ajax({
            url: '/loginuser',
            data: $('form').serialize(),
            type: 'POST',
            dataType: 'json',
            success: function(response){
                if (response.result == "success") {
                    alert("You have been logged in!");
                } else {
                    alert(result.details);
                    // You can do something much more complex than 'alert' here
                    // E.g, you can add a DOM element with an error message
                }
            },
            error: function(error){
                console.log(error);
            }
        });
    });
});

抱歉，但我无法理解你的第二个问题......

Answer 2

嗯，您不能仅仅按属性选择元素。不调用ajax函数。给提交按钮一个id，它将起作用。

例如：

更改此行

<input class="btn btn-default" type="submit" value="Login">

到

<input class="btn btn-default" id = "submitButton" type="submit" value="Login">

和 javascript到

 $('#submitButton').click(function(){.... });

如何切换到另一个网页jquery烧瓶

2 个答案: