uniapp前端的表单数据如何提交给后端

Question

uni.request要怎么写，才能把表单里的数据传到后端？？

<template>
    <view class="container">
        <uni-forms ref="valiForm"  :modelValue="valiFormData" class="my_forms">
            <uni-forms-item label="姓名:" required name="names">
                <uni-easyinput v-model="valiFormData.names" placeholder="请填写" />
            </uni-forms-item>
              <uni-forms-item label="年龄:" name="age">
                  <uni-easyinput v-model="valiFormData.age" placeholder="请填写" />
            </uni-forms-item>
</uni-forms>
<script>
    export default{
        data(){
            return{
                valiFormData:{
                  names:'',
                  age:'',
                 },
                rules: {
                    names: {
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能为空',
                        }]
                    },
                },
            }
        },
        methods: {
            // 触发提交表单
            submit(ref) {
                this.$refs[ref].validate().then(res => {
                    uni.request({
                        url: 'http://192.168.0.0:8800/api',
                        method: 'POST',
                        header: {'content-type' : "application/x-www-form-urlencoded"},
                        data: {
                            valiFormData: JSON.stringify(this.valiFormData),        
                        },
                        success: res => {
                            uni.reLaunch({
                               url:"/pages/home/index"
                            })
                        },
                        fail: () => {
                            console.log('err',err)
                            uni.showToast({ title: "服务器响应失败，请稍后再试！", icon : "error"});
                        },
                        complete: () => {}
                    })
                }).catch(err => {
                    wx.showModal({
                          title: `提示`,
                          content:`未填写信息`,
                          showCancel:false
                    });
                    console.log('err', err);
                })
            },
    }
</script>

Answer 1

submit(ref) {
                this.$refs[ref].validate().then(res => {
                    uni.request({
                        url: 'http://192.168.0.0:8800/api',
                        method: 'POST',
                        header: {'content-type' : "application/x-www-form-urlencoded"},
                        data: {
                            // 按照后台接口需要的字段写
                            names: res.names,
                            age: res.age   
                        },
                        success: res => {
                            uni.reLaunch({
                               url:"/pages/home/index"
                            })
                        },
                        fail: () => {
                            console.log('err',err)
                            uni.showToast({ title: "服务器响应失败，请稍后再试！", icon : "error"});
                        },
                        complete: () => {}
                    })
                }).catch(err => {
                    wx.showModal({
                          title: `提示`,
                          content:`未填写信息`,
                          showCancel:false
                    });
                    console.log('err', err);
                })
            },