如何使用JS获取HTML表单元素并通过Fetch API向指定URL提交数据

• 提交数据取值错误：通过getElementById拿到的是DOM元素节点，直接把节点对象放进待提交的data结构，序列化后后端只会收到[object HTMLInputElement]这类无意义占位值，根本拿不到用户输入的真实内容。必须读取节点的.value属性才能获取实际输入的字符串。
• fetch配置位置错误：credentials是fetch配置对象的顶级属性，不属于请求头范畴，把它写在headers内部会被浏览器直接忽略，跨域携带Cookie/凭证的需求无法生效。
• Promise链式逻辑顺序错乱：第一个.then就提前把响应流用response.json()解析完，后续回调里根本访问不到response变量来判断状态码；而且响应流是单向只能读一次的，等判断状态的时候再调用json()会直接触发“Body has already been consumed”的报错。正确顺序是先判断HTTP状态码，再解析响应体。
• 未定义变量风险：错误处理段使用的fout没有提前通过DOM查询获取对应页面节点，catch触发时会因为变量未声明直接抛ReferenceError。

// 获取表单输入对应的DOM元素
const passwordInput = document.getElementById("Password")
const mailInput = document.getElementById("Mail")
const usernameInput = document.getElementById("Username")
// 获取错误信息展示的页面容器（替换为你页面实际的节点ID）
const fout = document.getElementById("formErrorTip")

// 读取用户实际输入值组装提交数据
const submitData = {
    email: mailInput.value.trim(),
    password: passwordInput.value,
    nickName: usernameInput.value.trim()
}

// 发起POST请求
fetch('替换为你的实际业务请求URL', {
    method: 'POST',
    credentials: 'include', // 该配置放在顶级配置项，不属于headers
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(submitData),
})
    // 先校验响应状态，再解析内容
    .then(response => {
        if (response.status === 200) {
            return response.json()
        }
        throw new Error(`服务端异常，状态码: ${response.status}`)
    })
    .then(resData => {
        // 此处填写请求成功后的业务逻辑，如页面跳转、成功提示
        console.log('请求返回结果:', resData)
    })
    .catch(error => {
        fout.appendChild(document.createTextNode(error.message))
    })

补充说明：

• credentials: 'include'仅在跨域场景下需要携带Cookie时使用，同源请求不需要额外配置；跨域使用该配置时，后端响应不能把Access-Control-Allow-Origin设为*通配符，必须指定明确的允许源，否则会被浏览器安全策略拦截。
• 对邮箱、昵称这类字符串输入加trim()处理，可以过滤用户误输入的首尾空格，降低无效数据提交的概率。

内容的提问来源于stack exchange，提问作者Roan Truyers