当前位置:   article > 正文

python使用flask与js进行前后台交互_flask js

flask js

flask与js进行前后台交互代码如下,后台给前端发数据:

python部分:

  1. # -*- coding: utf-8 -*-
  2. from flask import Flask,jsonify,render_template
  3. import json
  4. app = Flask(__name__)#实例化app对象
  5. testInfo = {}
  6. @app.route('/test_post/nn',methods=['GET','POST'])#路由
  7. def test_post():
  8. testInfo['name'] = 'xiaoming'
  9. testInfo['age'] = '28'
  10. return json.dumps(testInfo)
  11. @app.route('/')
  12. def hello_world():
  13. return 'Hello World!'
  14. @app.route('/index')
  15. def index():
  16. return render_template('index.html')
  17. if __name__ == '__main__':
  18. app.run(host='0.0.0.0',#任何ip都可以访问
  19. port=7777,#端口
  20. debug=True
  21. )

js部分:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>echarts</title>
  8. <style type="text/css">
  9. html,
  10. body {
  11. width: 100%;
  12. height: 100%;
  13. }
  14. body {
  15. margin: 0px;
  16. padding: 0px
  17. }
  18. div {
  19. float: left;
  20. }
  21. #container {
  22. width: 50%;
  23. height: 100%;
  24. }
  25. #info {
  26. padding: 10px 20px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="container"></div>
  32. <div id="info">数据展示:</div>
  33. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  34. <script>
  35. $.ajax({
  36. url: "test_post/nn",
  37. type: "POST",
  38. dataType: "json",
  39. success: function (data) {
  40. console.log(data)
  41. }
  42. })
  43. </script>
  44. </body>
  45. </html>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/66519
推荐阅读
相关标签
  

闽ICP备14008679号