1.首先要进行后端与前端的连接有get 和post请求
get请求是直接在网页上打出已将定义好的网址
if __name__ == '__main__':
app.run(host="localhost",port=8800)
host也可以写ip地址
2.在进行交互前需要提前引入 flask 模块 pip3 install Flask
详细代码
1 import json 2 # 引入flask模块进行前后端交互 3 from flask import Flask 4 from flask import request 5 from flask import Response 6 # 通过装饰器创建实例化对象 7 app = Flask(__name__) 8 # 定义路由 9 @app.route("/") 10 # 路由对应的函数处理 11 def index(): 12 # 响应数据 13 resp = Response("<h2>首页</h2>") 14 # 允许所有跨域访问 15 resp.headers["Access-Control-Allow-Origin"] = "*" 16 return resp 17 # 定义路由 18 @app.route("/course") 19 # 路由对应函数处理 20 def course(): 21 resp = Response(json.dumps({ 22 "name":"alex" 23 })) 24 # 允许跨区域访问 25 26 resp.headers["Access-Control-Allow-Origin"] = "*" 27 return resp 28 # 路由对应的函数处理 这里改为post 29 @app.route("/zq",methods=["post",]) 30 def zq(): 31 # 打印出前端的value 32 print(request.form.get("name")) 33 with open("user.json","r") as f: 34 # 通过读取文件用json 35 data = json.loads(f.read()) 36 # data添加name为key 内容为value的值 37 data.append({"name":request.form.get("name")}) 38 with open("user.json", 'w')as f: 39 # 将data 添加的数据写到user.json文档中 40 f.write(json.dumps(data)) 41 # 将data打印到前端 42 resp = Response(json.dumps(data)) 43 resp.headers["Access-Control-Allow-Origin"] = "*" 44 return resp 45 46 47 if __name__ == '__main__': 48 app.run(host="localhost",port=8800)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 </head> 8 <body> 9 <div class="user"> 10 <input type="text" name="user"> 11 <input type="button" value="提交"> 12 </div> 13 <script SRC="jquery.js"></script> 14 <script> 15 /* $.ajax({ 16 url: "http://localhost:8800/course", 17 type: "get", 18 //这里需要声明dataType 不需要转换json就是字典, 19 // dataType:"json", 20 success: function (data) { 21 // console.log(data); 22 //因为server 是通过json传说那个字典的形式,传出来的是一串字符串,需要解开 23 var a = JSON.parse(data); 24 console.log(a); 25 //这是转换成字符串形式 26 var str_pretty = JSON.stringify(a); 27 console.log(str_pretty) 28 29 30 }, 31 error: function () { 32 33 } 34 });*/ 35 $("input[type=button]").click(function () { 36 //通过alex进行post请求 37 $.ajax({ 38 url:"http://127.0.0.1:8800/zq", 39 type:"post", 40 data:{ 41 name:$("input[type=text]").val() 42 }, 43 success:function (data) { 44 console.log(data); 45 }, 46 error:function () { 47 48 } 49 }) 50 }) 51 52 53 </script> 54 55 </body> 56 </html>
2.post请求需要data数据