为什么 html 表单发送空数据？

Question

我有一个 html 表单，其数据需要发送到 server.I，我使用编码类型 multipart/form-data。

相同的 HTML 形式是：

 <form class="news-container" enctype="multipart/form-data">
        <input type="checkbox" name=""><span>Featured Content</span></input>
        <br/>
        <br/>
        <input type="submit"  class="submit-btn"></input>
 </form>

获取formData并发送post请求的代码是：

const form=document.querySelector('.news-container');
submitbtn.addEventListener('click', (e) => {
    e.preventDefault();
    if(validateForm())
    {
    const data=new FormData(form);
    postData(data);    
    }
})

async function postData(data) {
    await fetch('http://localhost:5000/create', {
        method: 'POST',
        body: {
            title: `${data.title}`, content: `${data.content}`
        },
        headers: {
            'Content-Type': 'application/json'
        }
    })
    
}

Answer 1

您可以使用 FormData (docs) 中的 get 方法来读取特定值，如下所示：

async function postData(data) {
    await fetch('http://localhost:5000/create', {
        method: 'POST',
        body: {
            title: `${data.get('title')}`, content: `${data.get('content')}`
        },
        headers: {
            'Content-Type': 'application/json'
        }
    })
    
}

请记住，在您发布的示例中没有 title 或 content 表单字段。

为什么 html 表单发送空数据？

Why html form sending empty data?

forms

post

http

backend

node.js