当前位置:   article > 正文

使用axios将表单数据提交flask后台 案例_axios表单提交

axios表单提交

目的:将用户在前端表单中输入的数据提交到后台

前端:

  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></title>
  8. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  9. </head>
  10. <body>
  11. <div id="app">
  12. <el-form label-width="80px" :model="formData">
  13. <el-form-item label="活动名称" style="width:200px;">
  14. <el-input v-model="formData.name"></el-input>
  15. </el-form-item>
  16. <el-form-item label="活动区域">
  17. <el-select placeholder="请选择活动区域" v-model="formData.area">
  18. <el-option label="上海" value="上海"></el-option>
  19. <el-option label="北京" value="北京"></el-option>
  20. </el-select>
  21. </el-form-item>
  22. <el-form-item label="活动时间">
  23. <el-date-picker type="date" placeholder="选择日期" style="width: 200px;" v-model="formData.date1" value-format="yyyy-MM-dd"></el-date-picker>-
  24. <el-time-picker placeholder="选择时间" style="width: 200px;" v-model="formData.time1" value-format="HH:mm:ss"></el-time-picker>
  25. </el-form-item>
  26. <el-form-item label="即时配送">
  27. <el-switch v-model="formData.switch"></el-switch>
  28. </el-form-item>
  29. <el-form-item label="活动性质">
  30. <el-checkbox-group v-model="formData.activityNature">
  31. <el-checkbox label="1">美食/餐厅线上活动</el-checkbox>
  32. <el-checkbox label="2">地推活动</el-checkbox>
  33. <el-checkbox label="3">线下主题活动</el-checkbox>
  34. <el-checkbox label="4">单纯品牌曝光</el-checkbox>
  35. </el-checkbox-group>
  36. </el-form-item>
  37. <el-form-item label="特殊资源">
  38. <el-radio-group v-model="formData.resource">
  39. <el-radio label="1">线上品牌商赞助</el-radio>
  40. <el-radio label="2">线下场地免费</el-radio>
  41. </el-radio-group>
  42. </el-form-item>
  43. <el-form-item label="活动形式">
  44. <el-input type="textarea" v-model="formData.activities"></el-input>
  45. </el-form-item>
  46. <el-form-item>
  47. <el-button type="primary" @click="onSubmit">立即创建</el-button>
  48. <el-button>取消</el-button>
  49. </el-form-item>
  50. </el-form>
  51. </div>
  52. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  53. <script type="text/javascript" src="../js/vue.js"></script>
  54. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  55. <script>
  56. new Vue({
  57. el: '#app',
  58. data: {
  59. formData: {
  60. name: "轰趴",
  61. area: "北京",
  62. date1: "",
  63. time1: "",
  64. switch: true,
  65. activityNature: [],
  66. resource: "",
  67. activities: "",
  68. a: 1
  69. }
  70. },
  71. methods: {
  72. onSubmit() {
  73. // console.log(JSON.stringify(this.formData))
  74. // //处理Post请求
  75. // axios.post(
  76. // "http://192.168.0.120:5000/test", {
  77. // ID: this.formData.a,
  78. // formData: JSON.stringify(this.formData),
  79. // }
  80. // )
  81. // .then(function(response) {
  82. // let data = response.data
  83. // console.log(data)
  84. // })
  85. // .catch(function(error) {
  86. // // console.log(error)
  87. // });
  88. axios({
  89. url: "/test",
  90. method: "post",
  91. baseURL: 'http://192.168.0.120:5000',
  92. headers: {
  93. 'X-Requested-With': 'XMLHttpRequest',
  94. 'Content-Type': 'application/json'
  95. },
  96. data: {
  97. ID: this.formData.a,
  98. formData: JSON.stringify(this.formData),
  99. },
  100. timeout: 2000,
  101. })
  102. .then(function(response) {
  103. let data = response.data
  104. console.log(data)
  105. alert(data.msg)
  106. })
  107. .catch(function(error) {
  108. // console.log(error)
  109. });
  110. this.formData.a += 1
  111. }
  112. },
  113. })
  114. </script>
  115. </body>
  116. </html>

后台:

  1. import time,json
  2. from flask_sockets import Sockets
  3. from gevent import monkey
  4. from flask import Flask, jsonify,request
  5. from gevent import pywsgi
  6. from geventwebsocket.handler import WebSocketHandler
  7. from flask_cors import CORS
  8. monkey.patch_all()
  9. app = Flask(__name__)
  10. sockets = Sockets(app)
  11. CORS(app, supports_credentials=True)
  12. @app.route('/test', methods=["POST","GET"])
  13. def hello():
  14. response_str = request.get_data(as_text=True)
  15. data = json.loads(response_str, strict=False)
  16. print(data)
  17. return jsonify(msg="ok")
  18. if __name__ == "__main__":
  19. server = pywsgi.WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
  20. print('server start')
  21. server.serve_forever()
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/66553
推荐阅读
相关标签
  

闽ICP备14008679号