Javascript 使用ajax调用flask服务器进行登录身份验证（管道断裂）

我正在尝试使用对Python服务器（Flask）的ajax调用对web应用程序中的用户进行身份验证，而后者又调用主服务器。我可以将凭据传递给Flask服务器并进行身份验证。但在身份验证之后，它应该会将成功消息传回客户端，因此，我可以在网页上相应地重定向/显示消息。但是，它并没有返回消息。相反，它在身份验证后给出了一个断管错误。我编写了以下代码 客户端代码：

1） Javascript:

function login()
{
var user=document.getElementById("username").value;
var pass=document.getElementById("password").value;
//alert(JSON.stringify({username:user,password:pass}));
//var contentType = "application/x-www-form-urlencoded";
var ajax=$.ajax({
    type: "POST",
    //crossDomain: true,
    data: JSON.stringify({username:user,password:pass}),
    contentType:"application/x-www-form-urlencoded",
    dataType: "json",
    url: "http://0.0.0.0:8081"
    //async:true
}).done(function(data){


        //   alert(data);
    });
ajax.fail(function(data){


    //alert(data);
});

}

2） HTML:

问题：

1） 如果我通过Mozilla浏览器而不是Chrome发出请求，我会收到get请求而不是POST，并且不会发生身份验证

2） 虽然我发出了POST请求，但我在地址栏的url中看到了用户名和密码

请帮帮我吧……我已经为此辛劳了两天了

谢谢，

---

Sayan

javascript代码应该在最后一次包含（或者使用

$（document.ready

）延迟执行）。代码试图在呈现表单字段之前获取具有

document.getElementById（“username”）.value

的元素。除此之外，单击submit按钮时，表单通常会被提交，刷新页面并使ajax调用变得无用。此外，页面刷新可能会中断以前进行的ajax调用，从而导致日志中出现的断管错误

这里有一个稍微好一点的方法。让我们直接绑定到表单提交事件。在此之前，将

id=“loginForm”

添加到表单中，以便我们可以使用jQuery直接获取它，还可以从提交按钮中删除

onclick

属性

现在是javascript部分

$(document).ready(function() {
    // bind the form submit event to our function
    $("#loginForm").bind('submit', function(e) {
        // prevent page refresh
        e.preventDefault();
        // post the data
        var ajax=$.ajax({
            type: "POST",
            data: $("#loginForm").serialize(),
            url: "http://localhost:8081/"
        }).done(function(data){
            console.log('done!')
        });
        ajax.fail(function(data){
            console.log('error!');
        });
    });
});

在服务器端，获取表单字段数据，如

request.form.get（'username'）

和

request.form.get（'password'）

app = Flask(__name__)
@app.route('/', methods=['POST','GET','OPTIONS'])
@crossdomain(origin='*')
def login():

    data= request.get_json(force=True);
    br=mechanize.Browser()
    br.open('https://weaveprod.ucdp.utah.edu/geoserver/web/?wicket:bookmarkablePage=:org.geoserver.web.GeoServerLoginPage')
    br.select_form(nr=0) 
    username=data['username'];
    password=data['password'];
    br['username']= username
    br['password']= password

    response= br.submit()
    mainpage=response.read()
    val=mainpage.find('Invalid username/password combination')

    if val==-1:
            success = True
    else:
        success=False

    print success

    return jsonify(text=success);


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8081, debug=True,threaded=True)

$(document).ready(function() {
    // bind the form submit event to our function
    $("#loginForm").bind('submit', function(e) {
        // prevent page refresh
        e.preventDefault();
        // post the data
        var ajax=$.ajax({
            type: "POST",
            data: $("#loginForm").serialize(),
            url: "http://localhost:8081/"
        }).done(function(data){
            console.log('done!')
        });
        ajax.fail(function(data){
            console.log('error!');
        });
    });
});