使用formsubmit.co的AJAX提交表单收到空邮件，代码哪里存在问题？

错误原因梳理 #

• AJAX请求触发逻辑错误：你当前的AJAX代码写在script标签中会在页面加载时直接执行，此时用户还未填写表单内容、也没有点击提交按钮，提交的自然是空值。同时你没有绑定表单的提交事件，也没有阻止表单默认的刷新跳转行为，会导致数据提交异常。
• HTML结构错误：你的<textarea>标签没有写闭合标签</textarea>，会导致浏览器解析DOM结构异常，读取该输入框的值时会出现异常，无法拿到正确的用户输入内容。
• 参数遗漏：你表单中设置的_subject隐藏字段参数没有传入AJAX的data中，不过这不是本次空值问题的核心原因，属于附加优化点。

修正后的代码示例 #

HTML部分

<form action="" id="commentForm">
    <input type="hidden" name="_subject" value="email from formsubmit">
    <div class="Comment-rows">
        <div class="Comment-form">
            <div class="Comment-InputBox">
                <input id="CommentEmail" type="email" name="email" required placeholder="email">
            </div>
        </div>
    </div>
    <div class="Comment-rows">
        <div class="Comment-form">
            <div class="Comment-InputBox textarea">
                <!-- 补充闭合textarea标签 -->
                <textarea id="CommentMessage" required name="message" placeholder="message"></textarea>
            </div>
        </div>
    </div>
    <div class="Comment-form-Button">
        <button type="submit">
            <span>send</span>
        </button>
    </div>
</form>

JS部分

// 绑定表单提交事件
$('#commentForm').on('submit', function(e) {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    $.ajax({
        method: 'POST',
        url: 'https://formsubmit.co/ajax/MyEmail@gmail.com',
        dataType: 'json',
        accepts: 'application/json',
        data: {
            email: document.querySelector('#CommentEmail').value,
            message: document.querySelector('#CommentMessage').value,
            // 补充传入主题参数
            _subject: document.querySelector('input[name="_subject"]').value
        },
        success: (data) => {
            console.log(data);
            alert('提交成功');
            // 提交成功后可清空表单
            $('#commentForm')[0].reset();
        },
        error: (err) => {
            console.log(err);
            alert('提交失败，请重试');
        }
    });
});

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