FormData 获取表单值发送数据

最新推荐文章于 2025-05-13 09:55:05 发布

臧小川

最新推荐文章于 2025-05-13 09:55:05 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

臧小川

本文链接：https://blog.youkuaiyun.com/chuan0106/article/details/122360830

本文记录了一位开发者在处理前端表单提交时遇到的问题及解决方案，包括使用fetch API与表单提交的差异，如何处理表单数据，以及在处理返回值时遇到的跨域问题。开发者最终通过理解HTTP方法和表单提交机制，成功实现了表单的正确提交与数据解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：怎么每天都能遇到这么奇奇怪怪的问题。当有这种想法的时候还是证明自己实力太差了，需要提升的还有很多呀！

事情是这样的需要做一个的表单提交需求提交成功与失败都有个提示？心想这还不简单把要传递的参数传给后台然后给我个返回值我拿着返回值判断不就OK了想到这样我就开始做了

在这里插入图片描述 )

先把大致写出来
在这里插入图片描述
Index


import React from 'react'
import {
   
    Form, Input, Button, Select } from 'antd';
const {
   
    Option } = Select;
const layout = {
   
   
    labelCol: {
   
    span: 8 },
    wrapperCol: {
   
    span: 16 },
};



const index = () =>
{
   
   
    const validateMessages = {
   
   
        required: '${label} is required!',
        types: {
   
   
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
   
   
            range: '${label} must be between ${min} and ${max}',
        },
    };
  const onFinish = (values) =>
    {
   
   
        let options = {
   
   
            method: 'post',
            body: values.user
        }
        fetch('http://114.255.136.222:7000/red-market/activity/activity_upload', options).then(response =>
        {
   
   
            console.log(response, 'response');
        }, error =>
        {
   
   
            console.log(error, 'error');
        })
    };
    return (
        <div style={
   
   {
   
    display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', height: '100vh' }}>

            <Form id='form' style={
   
   {
   
    width: "1200px", textAlign: 'center' }} {
   
   ...layout} name="nest-messages" onFinish={
   
   onFinish} validateMessages={
   
   validateMessages}>
                <Form.Item name={
   
   ['user', 'name']} label="名称" rules={
   
   [{
   
    required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={
   
   ['user', 'address']} label="地点" rules={
   
   [{
   
    required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item
                    name={
   
   ['user', 'type']}
                    label="类型"
                    hasFeedback
                >
                    <Select >
                        <Option value="羽神">羽神</Option>
                        <Option value="少主">少主</Option>
                    </Select>
                </Form.Item>
                <Form.Item name={
   
   ['user', 'startTime']} label="开始时间">
                    <Input />
                </Form.Item