详解Python flask的前后端交互

目录

• 前端
• index.html
• script.js
• 后端
• app.py
• 总结

场景：按下按钮，将左边的下拉选框内容发送给后端，后端再将返回的结果传给前端显示。

按下按钮之前：

按下按钮之后：

代码结构

这是flask默认的框架（html写在templates文件夹内、css和js写在static文件夹内）

前端

index.html

很简单的一个select下拉选框，一个按钮和一个文本，这里的 {{ temp }} 是从后端调用的。

    
    
    
    
    


    

        

            
                新一
                小兰
                柯南
                小哀
            
        
        

            转换    
        
        
{{ temp }}
    
      
    

script.js

这里给按钮添加一个监听事件，按下就会给服务器发送内容，成功了则返回内容并更改display。

注意

• 需要在html里添加