如何通过JavaScript使用POST请求将表单数据发送到API

实现步骤 #

1. 先给表单控件补充name属性，方便后续收集表单数据，修改后的HTML代码如下：

<form id="contactForm" class="w-75 mx-auto">
    <input type="text" name="name" class="form-control bg-transparent" placeholder="Name">
    <input type="email" name="email" class="form-control bg-transparent my-3" placeholder="E-mail">
    <textarea name="message" class="form-control bg-transparent" placeholder="Your Message"></textarea>
    <button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button>
</form>

2. 完整的JS实现代码如下，包含表单数据收集、请求发送、响应错误校验逻辑：

$('#contactForm').submit(function (e) {
    e.preventDefault();
    // 收集表单数据
    let formData = $(this).serialize();
    // 前端基础非空校验，可根据需求扩展规则
    let name = $('input[name="name"]').val().trim();
    let email = $('input[name="email"]').val().trim();
    let message = $('textarea[name="message"]').val().trim();
    if(!name || !email || !message) {
        alert('所有字段都不能为空，请填写完整后提交');
        return;
    }
    // 校验邮箱格式
    let emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if(!emailReg.test(email)) {
        alert('请输入正确的邮箱格式');
        return;
    }
    // 发送请求到API，替换下方API_URL为你实际的接口地址
    $.ajax({
        url: 'API_URL',
        type: 'POST',
        data: formData,
        dataType: 'json',
        success: function(res) {
            // 这里根据你的API实际返回的错误字段做调整，示例是判断返回的code字段非0为错误
            if(res.code !== 0) {
                alert('提交失败：' + (res.msg || '未知错误'));
                return;
            }
            alert('提交成功');
            // 提交成功后清空表单
            $('#contactForm')[0].reset();
        },
        error: function(xhr, error, msg) {
            // 处理请求异常，比如网络错误、接口500等情况
            alert('请求出错：' + (msg || '网络异常，请稍后再试'));
        }
    });
});

说明 #

• 请将代码中的API_URL替换为你实际的后端接口地址
• 响应校验的逻辑需要和你的API返回结构对齐，示例中使用code字段判断业务状态，你可以根据实际接口返回的字段（比如status、errno等）修改对应判断规则
• 前端校验仅做基础拦截，后端仍需做好参数合法性校验

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