前端新手求教：如何将HTML表单数据提交至ASP.NET后端

我是前端领域的新手，仅掌握HTML、CSS和JavaScript技术。目前我和朋友合作开发一个用户面板项目，管理员可在该面板中添加用户，朋友负责用ASP.NET开发后端。我已经完成了添加用户的表单编写，但不清楚如何把表单数据提交到服务器/后端。以下是我写的表单代码：

<form class="addUser-from" action="" method="Post">
    <div class="form-row">
        <div class="form-dow-box">
            <label for="userName">username</label>
            <input type="text" name="userName" id="userName" placeholder="username" required="" oninvalid="this.setCustomValidity('لطفا نام و نام خانوادگی را وارد کنید')" oninput="this.setCustomValidity('')"/>
        </div>
        <div class="form-dow-box">
            <label for="user-id-number">id number </label>
            <input type="text" name="user-id-number" id="user-id-number" placeholder="id number" required="" oninvalid="this.setCustomValidity('لطفا کد ملی را وارد کنید')" oninput="this.setCustomValidity('')"/>
        </div>
    </div>
    <div class="form-row">
        <div class="form-dow-box">
            <label for="userPass">password</label>
            <input type="password" name="userPass" id="userPass" placeholder="password" required="" oninvalid="this.setCustomValidity('لطفا رمز عبور را وارد کنید')" oninput="this.setCustomValidity('')"/>
        </div>
    </div>
    <div class="submit-box-btn">
        <button type="submit" class="form-box-submit">add</button>
    </div>
</form>

方法一：原生表单提交（最简单） #

你的表单已经用了method="Post"，只需要把action属性的值改成你朋友提供的ASP.NET后端接口地址即可，比如：

<form class="addUser-from" action="/api/Users/Add" method="Post">

• 这里的/api/Users/Add需要替换成你朋友实际写好的后端接收用户数据的接口路径，务必让他给你准确地址。
• 提交后浏览器会自动跳转到接口返回的页面，如果想保持当前页面不跳转，就用下面的AJAX方法。

方法二：AJAX提交（无刷新） #

用JavaScript监听表单的提交事件，手动收集数据并发送到后端，页面不会刷新。修改步骤如下：

首先给表单加个id方便获取：

<form id="addUserForm" class="addUser-from" method="Post">

然后添加JavaScript代码：

document.getElementById('addUserForm').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();

    // 自动收集表单所有数据（按input的name属性打包）
    const formData = new FormData(this);

    // 发送POST请求到后端接口
    fetch('/api/Users/Add', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (response.ok) {
            alert('用户添加成功');
            // 清空表单
            this.reset();
        } else {
            alert('添加失败，请重试');
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('请求出错，请检查网络或后端接口');
    });
});

• 同样，/api/Users/Add要替换成实际的后端接口地址。
• 提交成功后可以根据需求做提示、清空表单等操作，失败也给出对应反馈。

关键注意事项 #

• 必须和你的朋友确认后端接口的路径、请求方法（这里是POST）以及需要的参数名称，确保表单里的name属性和后端接收的参数名完全匹配，比如你的userName、user-id-number、userPass，要让后端对应上这些字段名。
• 如果后端要求用JSON格式提交数据，需要把FormData转成JSON格式发送：

const formObj = {};
formData.forEach((value, key) => { formObj[key] = value; });

fetch('/api/Users/Add', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(formObj)
})

这个格式要求也需要和后端开发同学确认。

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