Question

我具有用于登录的代码。在调试代码时，我检查FormData（）构造函数是否不返回任何内容，它为空。我究竟做错了什么？ formLog常量确实会收集表单数据，但是在将其传递给FormData（）构造函数之后，返回的对象为空

<form id="login" method="post" enctype="multipart/form-data" name="login">
    <input type="email" name="email" placeholder="Tu email">
    <br><br>
    <input type="password" name="password" placeholder="Tu contraseña">
    <br><br>
    <input type="submit" value="Login">
</form>

<script type="text/javascript">
    const formLog = document.querySelector('#login')
    //Creamos un objeto con los datos del formulario

    // AL formLog le agregamos un evento 
    formLog.addEventListener('submit',event =>{
        event.preventDefault()
        const data = new FormData(formLog)       
        fetch('/api/signin',{
            method:'POST',
            body: data,
        })
        .then(res => {
            res.json()
        })
        .then(resData => {
            localStorage.setItem('token', resData.token)
        })
    })
</script>

Answer 1

使用spread syntax将从FormData对象中获取所有值。然后使用Array#reduce和destructuring来组织一个简单对象中的所有内容。

const form = document.getElementById("login");

form.addEventListener("submit", function(e){
  e.preventDefault();
  
  const data = [...new FormData(this)]
  .reduce((a,[key,value])=>{
    a[key] = value;
    return a;
  }, {});
  
  console.log(data);
});

<form id="login" method="post" enctype="multipart/form-data" name="login">
    <input type="email" name="email" placeholder="Tu email" value="test@test.com">
    <br><br>
    <input type="password" name="password" placeholder="Tu contraseña" value="some password">
    <br><br>
    <input type="submit" value="Login">
</form>

为什么FormData（）构造函数不起作用

1 个答案: