初次发帖，最近在学习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()
你的问题可能是由于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";语句实现页面的跳转。