ajax接口

1.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)}

 

相关文章