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

作者：小丑西瓜9 | 2024-02-07 17:20:35

踩

axios表单提交

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

前端：


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>
 
<body>
    <div id="app">
        <el-form label-width="80px" :model="formData">
            <el-form-item label="活动名称" style="width:200px;">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select placeholder="请选择活动区域" v-model="formData.area">
                    <el-option label="上海" value="上海"></el-option>
                    <el-option label="北京" value="北京"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-date-picker type="date" placeholder="选择日期" style="width: 200px;" v-model="formData.date1" value-format="yyyy-MM-dd"></el-date-picker>-
                <el-time-picker placeholder="选择时间" style="width: 200px;" v-model="formData.time1" value-format="HH:mm:ss"></el-time-picker>
            </el-form-item>
            <el-form-item label="即时配送">
                <el-switch v-model="formData.switch"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
                <el-checkbox-group v-model="formData.activityNature">
                    <el-checkbox label="1">美食/餐厅线上活动</el-checkbox>
                    <el-checkbox label="2">地推活动</el-checkbox>
                    <el-checkbox label="3">线下主题活动</el-checkbox>
                    <el-checkbox label="4">单纯品牌曝光</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源">
                <el-radio-group v-model="formData.resource">
                    <el-radio label="1">线上品牌商赞助</el-radio>
                    <el-radio label="2">线下场地免费</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="formData.activities"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
 
 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                formData: {
                    name: "轰趴",
                    area: "北京",
                    date1: "",
                    time1: "",
                    switch: true,
                    activityNature: [],
                    resource: "",
                    activities: "",
                    a: 1
                }
            },
            methods: {
                onSubmit() {
                    // console.log(JSON.stringify(this.formData))
                    // //处理Post请求
                    // axios.post(
                    //         "http://192.168.0.120:5000/test", {
                    //             ID: this.formData.a,
                    //             formData: JSON.stringify(this.formData),
                    //         }
                    //     )
                    //     .then(function(response) {
                    //         let data = response.data
                    //         console.log(data)
                    //     })
                    //     .catch(function(error) {
                    //         // console.log(error)
                    //     });
                    axios({
                            url: "/test",
                            method: "post",
                            baseURL: 'http://192.168.0.120:5000',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Content-Type': 'application/json'
                            },
                            data: {
                                ID: this.formData.a,
                                formData: JSON.stringify(this.formData),
                            },
                            timeout: 2000,
 
                        })
                        .then(function(response) {
                            let data = response.data
                            console.log(data)
                            alert(data.msg)
                        })
                        .catch(function(error) {
                            // console.log(error)
                        });
                    this.formData.a += 1
                }
            },
        })
    </script>
</body>
 
</html>

后台：


import time,json
from flask_sockets import Sockets
from gevent import monkey
from flask import Flask, jsonify,request
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
from flask_cors import CORS
 
monkey.patch_all()
 
app = Flask(__name__)
sockets = Sockets(app)
CORS(app, supports_credentials=True)
 
@app.route('/test', methods=["POST","GET"])
def hello():
      response_str = request.get_data(as_text=True)
      data = json.loads(response_str, strict=False)
      print(data)
      return jsonify(msg="ok")
 
 
if __name__ == "__main__":
    server = pywsgi.WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
    print('server start')
    server.serve_forever()

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/66553

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

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