如何在axios中从数据表单提交数据

Question

我正在尝试向端点发送表单，但收到错误禁止 403，并且我已经尝试过 api 测试并且端点工作正常

const SendData = (event) => {
    event.preventDefault();
    let respuestasUSer = new FormData();
    respuestasUSer.set('curso', state.curso)
    respuestasUSer.set('nombre', state.nombre)
    respuestasUSer.set('q1', state.Pregunta1)
    respuestasUSer.set('q2', state.Pregunta2)
    respuestasUSer.set('q3', state.Pregunta3)
    respuestasUSer.set('q4', state.Pregunta4)
    respuestasUSer.set('q5', state.Pregunta5)
    respuestasUSer.set('q6', state.Pregunta6)
    respuestasUSer.set('q7', state.Pregunta7)
    respuestasUSer.set('q8', state.Pregunta8)
    axios({
        method: "post",
        url: "https://covid.cit0.com/guardar/encuesta/",
        data: respuestasUSer,
        headers: { "Content-Type": "multipart/form-data" },
      })
        .then(function (response) {
          //handle success
          console.log(response);
        })
        .catch(function (response) {
          //handle error
          console.log(response);
        });   
} 

在 api 测试中我这样做并且它对我有用，我如何将相同的内容传递给 axios？

Answer 1

如果你使用 react 作为前端

首先您在输入文本字段中设置 onchange 事件，例如

<form>
<input type="text" name="first_name" placeholder="first name" onChange={handlechange} />

创建

像这样定义handlechange函数

function handlechange (e) {
        const {name,value} = e.target
        setstate({...state,[name]:value}) 

}

//在此之前要定义像const [state, setstate] = useState({})这样的状态

然后定义handleclick函数，如

    function handleclick (e) {
            e.preventDefault()
            
             axios.post('/super_admin/newuser',state).then((res)=>{
                
console.log(res.data)
                
            }).catch(err=>{

console.log(err.response.data)

})
    }

这是完整的代码

import {useState, } from 'react'
import axios from 'axios'

export default function Newuser() {

const [state, setstate] = useState({})

function handlechange (e) {
        const {name,value} = e.target
        setstate({...state,[name]:value})
    }

function handleclick (e) {
                e.preventDefault()
                
                 axios.post('/your api',state).then((res)=>{
                    
    console.log(res.data)
                    
                }).catch(err=>{
    
    console.log(err.response.data)
    
    })
        }

return (

<div>
<form>
<input type="text" name="first_name" placeholder="first name" onChange={handlechange} />
<button onClick={handleclick}>Create</button>
</form>
</div>
)

}

Answer 2

对于发送表单数据，您可以将 handleclick 函数编辑为类似的内容

    function handleclick (e) {
       e.preventDefault()

   const fd = new FormData()

                fd.append('first_name',state.first_name)

                 axios.post('/your api',fd).then((res)=>{
                    
    console.log(res.data)
                    
                }).catch(err=>{
    
    console.log(err.response.data)
    
    })
        }