flask的客户端服务端

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>
前端ajax

2.post请求需要data数据 



posted @ 2018-10-11 20:23  逆欢  阅读(558)  评论(0)  编辑  收藏  举报