我正在尝试使用 ajax 调用 Python 服务器(Flask)来对 Web 应用程序中的用户进行身份验证，Python 服务器又调用主服务器。我能够将凭据传递到 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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<!--link rel="stylesheet" type="text/css" href="login.css"-->
<script type="text/javascript" src="login_auth.js" ></script>
</head>
<body>
<!-- Begin Page Content -->
<div id="container">
<form>
<input type="text" id="username" name="username" value="sayan" >
<input type="password" id="password" name="password" value="3BxTPu+y4YA">
<div id="lower">
<input type="checkbox" id="checkbox" name="checkbox"><label class="check" for="checkbox">Keep me logged
in</label>
<input type="submit" value="Login" onclick="login()">
</div>
<!--/ lower-->
</form>
</div><!--/ container-->
<!-- End Page Content -->
</body>
</html>
3)Flask服务器代码:
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)
问题:
1) 如果我通过 Mozilla 浏览器而不是 Chrome 发出请求，我会收到 GET 请求而不是 POST，并且不会发生身份验证。
2)虽然我发出了 POST 请求，但我在地址栏的 url 中看到了用户名和密码。
请帮帮我...我已经为此辛苦了 2 天。
谢谢， 萨彦
最佳答案
JavaScript 代码应包含在最后(或使用 $(document).ready 延迟执行)。在渲染表单字段之前，代码尝试使用 document.getElementById("username").value 获取元素。除此之外，单击提交按钮后，表单会正常提交，刷新页面并使以前的 ajax 调用变得无用。此外，页面刷新可能会中断之前进行的 ajax 调用，从而导致您在日志中看到损坏的管道错误。
这是一个稍微好一点的方法。让我们直接绑定(bind)到表单提交事件。在此之前，将 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')。
关于javascript - 使用 ajax 调用 Flask 服务器进行登录身份验证(管道损坏)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22361897/