ajax接口

# 通过flask框架搭建后台from flask import Flask, request# 创建一个服务器对象app = Flask(__name__)# 解决ajax请求的跨域问题from flask_cors import CORSCORS(app, supports_credentials=True)# 设置处理请求的功能(路由route => 接口)# 设置一个主页路由, 对应一个处理主页的功能方法, 返回主页信息@app.route(‘/‘)def home_action(): ???return ‘<h1 style="color: red">主页</h1>‘# 为ajax登录请求配置一个处理登录的功能@app.route(‘/login‘)def login_action(): ???# 拿到前台数据, 进一步判断处理 ???# 需要: 需要账号与密码, 匹配成功与否决定返回结果 ???user = request.args[‘user‘] # ‘user‘是规定前台需要传入数据的key ???pwd = request.args[‘pwd‘] ???# print(user) ???if user == ‘abc‘ and pwd == ‘123‘: ???????return "登录成功" ???return "登录失败"# 启动服务(该文件作为自启文件)if __name__ == ‘__main__‘: ???app.run(port="8888")

<h1>请登录</h1><form class="fm"> ???<input id="user" type="text" name="user" placeholder="请输入用户名"> ???<input id="pwd" type="password" name="pwd" placeholder="请输入密码"> ???<input class="sbm" type="submit" value="提交..."></form>

// 取消表单的默认事件$(‘.fm‘).submit(function () { return false; })// 表单提交完成的是ajax请求$(‘.sbm‘).click(function () { ???// 前提: 准备发送的数据 ???var user = $(‘#user‘).val(); ???var pwd = $(‘#pwd‘).val(); ???// 1.通过ajax发生请求, 获得后台响应的结果 ???// 2.用得到的结果来局部渲染页面内容 ???// 1. ???$.ajax({ ???????url: "http://127.0.0.1:8888/login", // 接口 ???????data: { ?// 数据 ???????????user: user, ???????????pwd: pwd ???????}, ???????success: function (data) { ?// 结果 ???????????// 2. ???????????doSomething(data); ???????} ???})});// 处理结果数据的功能function doSomething(data) { ???// console.log(data) ???$(‘h1‘).text(data)}