1.首先要进行后端与前端的连接有get 和post请求

get请求是直接在网页上打出已将定义好的网址

if __name__ == '__main__':
    app.run(host="localhost",port=8800)
host也可以写ip地址

2.在进行交互前需要提前引入 flask 模块 pip3 install Flask
详细代码
 import json

 # 引入flask模块进行前后端交互

 from flask import Flask

 from flask import  request

 from flask import  Response

 # 通过装饰器创建实例化对象

 app = Flask(__name__)

 # 定义路由

 @app.route("/")

 # 路由对应的函数处理

 def index():

     # 响应数据

     resp = Response("<h2>首页</h2>")

     # 允许所有跨域访问

     resp.headers["Access-Control-Allow-Origin"] = "*"

     return resp

 # 定义路由

 @app.route("/course")

 # 路由对应函数处理

 def course():

     resp = Response(json.dumps({

         "name":"alex"

     }))

     # 允许跨区域访问

     resp.headers["Access-Control-Allow-Origin"] = "*"

     return  resp

 # 路由对应的函数处理 这里改为post

 @app.route("/zq",methods=["post",])

 def zq():

     # 打印出前端的value

     print(request.form.get("name"))

     with open("user.json","r") as f:

         # 通过读取文件用json

         data = json.loads(f.read())

     #     data添加name为key 内容为value的值

     data.append({"name":request.form.get("name")})

     with open("user.json", 'w')as  f:

         # 将data 添加的数据写到user.json文档中

         f.write(json.dumps(data))

     #     将data打印到前端

     resp = Response(json.dumps(data))

     resp.headers["Access-Control-Allow-Origin"] = "*"

     return resp

 if __name__ == '__main__':

     app.run(host="localhost",port=8800)

后端

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>

 <body>

 <div class="user">

     <input type="text" name="user">

     <input type="button" value="提交">

 </div>

 <script SRC="jquery.js"></script>

 <script>

 /*    $.ajax({

         url: "http://localhost:8800/course",

         type: "get",

         //这里需要声明dataType 不需要转换json就是字典,

         // dataType:"json",

         success: function (data) {

             //     console.log(data);

             //因为server 是通过json传说那个字典的形式,传出来的是一串字符串,需要解开

             var a = JSON.parse(data);

             console.log(a);

             //这是转换成字符串形式

             var str_pretty = JSON.stringify(a);

             console.log(str_pretty)

         },

         error: function () {

         }

     });*/

     $("input[type=button]").click(function () {

         //通过alex进行post请求

         $.ajax({

             url:"http://127.0.0.1:8800/zq",

             type:"post",

             data:{

                 name:$("input[type=text]").val()

             },

             success:function (data) {

                 console.log(data);

             },

             error:function () {

             }

         })

     })

 </script>

 </body>

 </html>

前端ajax

2.post请求需要data数据

												


											
flask的客户端服务端的更多相关文章
	

    
								
  1. MVC验证10-到底用哪种方式实现客户端服务端双重异步验证
		
    原文:MVC验证10-到底用哪种方式实现客户端服务端双重异步验证 本篇将通过一个案例来体验使用MVC的Ajax.BeginForm或jQuery来实现异步提交,并在客户端和服务端双双获得验证.希望能梳 ...
    
		
    2. 
						
  2. Eureka源码探索（一）-客户端服务端的启动和负载均衡
		
    1. Eureka源码探索(一)-客户端服务端的启动和负载均衡 1.1. 服务端 1.1.1. 找起始点 目前唯一知道的,就是启动Eureka服务需要添加注解@EnableEurekaServer,但 ...
    
		
    3. 
						
  3. Python Flask 实现移动端应用接口（API）
		
    引言 目前,Web 应用已形成一种趋势:业务逻辑被越来越多地移到客户端,逐渐完善为一种称为富互联网应用(RIA,rich Internet application)的架构.在 RIA 中,服务器的主要 ...
    
		
    4. 
						
  4. servlet jsp 客户端服务端跳转
		
    jsp 客户端:href jsp 服务端:forward servlet 客户端:response.sendredirect(); servlet 服务器:request.getRequestDisp ...
    
		
    5. 
						
  5. Redis设计与实现-客户端服务端与事件
		
    事件 redis服务器是事件驱动的,事件分为文件事件与时间事件 文件事件是服务器通过套接字与客户端连接,两者之间的通信会产生相应的文件事件,服务器监听并处理这些事件完成网络操作: 时间事件是指redi ...
    
		
    6. 
						
  6. 第四章：使用Proxy代理让客户端服务端分工合作。
		
    <基于1.8 Forge的Minecraft mod制作经验分享> 别被那个Proxy代理吓到,很简单的. 我们先讨论为什么要用Proxy代理: 像打开新的UI这种操作,比如打开一个背包, ...
    
		
    7. 
						
  7. C# 客户端服务端的编写
		
    客户端的代码 class client { public void mehod() { TcpClient tcp = new TcpClient(); tcp.Connect(IPAddress.P ...
    
		
    8. 
						
  8. Cxf 自动生成客户端服务端代码
		
    第一步: 下载apache-cxf安装包.并安装. 第二步: 配置cxf的环境变量. CXF_HOME = "CXF安装路径". 例如:F:\apache-cxf-2.1.2 在P ...
    
		
    9. 
						
  9. HTTP协议简介详解 HTTP协议发展 原理 请求方法 响应状态码 请求头 请求首部 java模拟浏览器客户端服务端
		
    协议简介 协议,自然语言里面就是契约,也是双方或者多方经过协商达成的一致意见; 契约也即类似于合同,自然有甲方123...,乙方123...,哪些能做,哪些不能做; 通信协议,也即是双方通过网络通信必 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Linux性能优化实战学习笔记：第五十讲
			
    一.上节回顾 上一节,我以 ksoftirqd CPU 使用率高的问题为例,带你一起学习了内核线程 CPU 使用率高时的分析方法.先简单回顾一下. 当碰到内核线程的资源使用异常时,很多常用的进程级性能 ...
    
			
    2. 
						
  2. java导出标题多行且合并单元格的EXCEL
			
    场景:项目中遇到有需要导出Excel的需求,并且是多行标题且有合并单元格的,参考网上的文章,加上自己的理解,封装成了可自由扩展的导出工具 先上效果,再贴代码: 调用工具类进行导出: public st ...
    
			
    3. 
						
  3. java、ajax 跨域请求解决方案（'Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.）
			
      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested  ...
    
			
    4. 
						
  4. c++ 使用 vcpkg
			
    1. 打开下载地址:https://github.com/Microsoft/vcpkg 2. 直接下载到本地某个盘 3. 配置环境变量: 4. 打开下载到本地的vcpkg有可能叫vcpkg-mast ...
    
			
    5. 
						
  5. LeetCode 167：两数之和 II - 输入有序数组 Two Sum II - Input array is sorted
			
    公众号: 爱写bug(ID:icodebugs) 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index ...
    
			
    6. 
						
  6. phpredis可视化工具RedisDesktopManager
			
    phpredis可视化工具RedisDesktopManager这个管理phpredis还不错下载地址https://redisdesktop.com/download刷新数据可以右键db0 relo ...
    
			
    7. 
						
  7. [转] linux 查找文本过滤grep正则表达式命令详解用法
			
    grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用 ...
    
			
    8. 
						
  8. ASP.NET MVC 过滤、异常过滤器
			
    记录下过滤器的学习—_— APS.NET MVC中的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前后如果想再加一些额外的逻辑处理,这样会造成大量代码的重复使用,这不是我们希 ...
    
			
    9. 
						
  9. 前端跨域之Jsonp实现原理及.Net下Jsonp的实现
			
    jsonp的本质是通过script标签的src属性请求到服务端,拿到到服务端返回的数据 ,因为src是可以跨域的.前端通过src发送跨域请求时在请求的url带上回调函数,服务端收到请求时,接受前端传过 ...
    
			
    10. 
						
  10. crawler_app_在Airtest无线模式控制手机
			
    无线模式开启: adb tcpip 48887 参考引用:  https://www.cnblogs.com/xieqiankun/p/wireless-mode-of-poco.html
    
			
    11.