前端.html
- url:一个用来包含发送请求的URL字符串。
-
data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。
必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
-
success(data, textStatus, jqXHR)Function,Array,请求成功后的回调函数。
回调函数的参数：由服务器返回，并根据dataType参数进行处理后的数据。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<h1>登录</h1>
<hr>
<form action="">
<label>账号:</label><input class="txt" type="text" name='usr'>
<hr>
<label>密码:</label><input class="ps" type="password" name="ps">
<hr>
<button type="submit">登录</button>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 如果登录成功,h1显示登录成功
// 如何登录失败,h1显示登录失败
$("form").on("submit", function () {
console.log(123);
var usr = $('.txt').val();
var ps = $('.ps').val();
console.log(usr, ps);
// 将数据提交给后台 => ajax
$.ajax({
url: "http://127.0.0.1:5000/loginAction",
data: {
usr: usr,
ps: ps
},
success: function (data) {
$('h1').text(data);
}
})
return false;
});
</script>
</html>
后台.py
-
flask 用于搭建服务器后台进行数据的传输和响应
-
flask_cors 用于开启数据的跨域接收
from flask import Flask, request
from flask_cors import CORS
# 服务器对象
app = Flask(__name__)
# 解决跨域
CORS(app, supports_credentials=True)
# 定义接口事件
@app.route('/loginAction', methods=["GET", "POST"])
def login_action():
print(request.args)
usr = request.args['usr']
ps = request.args['ps']
if usr == "abc" and ps == "123":
return "登录成功"
return "登录失败"
# 启动服务
if __name__ == '__main__':
app.run()
