JQ-ajax + Flask +Flask-Cors - 搭建简单的前后台交互
前端.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()