如何切换到另一个网页 jquery flask答案

【问题标题】：How switching to another web page jquery flask如何切换到另一个网页 jquery flask
【发布时间】：2015-06-14 03:50:42
【问题描述】：

我制作了一个允许用户登录的脚本我使用了python flask microframework jquery，但问题是如果我填写了用户和密码字段，它将不会有一个通道到我已经在方法中指定的另一个页面，如果数据是 loginuser 正确的。第二个问题是url中的鉴定数据。

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);
            }
        });
    });
});

这个脚本.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)

【问题讨论】：

标签： jquery python html flask-login flask-restful

【解决方案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);
            }
        });
    });
});

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

【讨论】：

Leonvich 是我必须按照您所说的那样更改 .js 文件，或者我如何才能使来自另一个页面的调用成功。谢谢
我想说的是，如果您使用 AJAX 拨打电话，它不会刷新浏览器中的当前页面。它仅从您的服务器检索 HTTP 响应，并允许您在 success 和 error 函数中访问它。因此，如果您只是进行 AJAX 调用，您将不会在页面上看到任何更改。您应该通过编写一些 JS 代码在 success 回调中显式执行它们。正如我所说，HTML 响应不是通过 AJAX 传递数据的最佳格式，在这种情况下最好使用 JSON 或 XML。

【解决方案2】：

好吧，你不能只通过属性来选择一个元素。不调用 ajax 函数。给提交按钮一个 id 就可以了。

例如：

改变这一行

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

到

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

和

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

【讨论】：

我向按钮添加了 id 但我无法切换到另一个页面。@gopiariv