使用 AJAX 解析的多个复选框

Question

我已经测试并搜索了该主题，但在我的案例中没有找到确切的（有效）答案。

我的大学实验室有一个简单的表单，它作为带有 Google reCAPTCHA 脚本的 AJAX 表单工作。对于单一值来说没有问题。

现在我必须发送两件不同的东西 - 多个复选框答案和院长接受的学生确认的文件/照片文件。

现在我有类似的东西，但不知道如何解析以捕获另一侧的值和文件：

<div class="mb-3">
    <input name="recePh" class="hidden" type="file" id="recePh" required /><a href="#" id="clear">Clear</a>
</div>

<div class="mb-3">
    <input type="checkbox" id="brands1" name="brands[]" value="value number 1" /><label for="brands1">Value number 1</label>
    <input type="checkbox" id="brands2" name="brands[]" value="value number 2" /><label for="brands2">Value number 2</label>
    <input type="checkbox" id="brands3" name="brands[]" value="value number 3" /><label for="brands3">Value number 3</label>
</div>

我的 AJAX 脚本有这样的内容：

$(document).on('submit', '#ajax-form', function(e){
    e.preventDefault();
    grecaptcha.ready(function() {
    grecaptcha.execute('KEY_VALUE', {action: 'validate_captcha'}).then(function(token) {

    let formData = {
        name: $('#name').val(),
        email: $('#email').val(),
        recePh: $('#recePh').val(),
        brands: $('brands[]').serializeArray(),
        import: $('#import').val(),
        token: token,
        action : 'validate_captcha'
    };
    $.post('submit.php', formData, function(response){
        if( response === '0'){
        $("#ajax-form").fadeOut();
        $("div.noticesBlock").css({"margin":"60px 0"});
        $("#successMessage").fadeIn().text("Message Info.");
    }
});

Answer 1

要轻松检索表单中的所有数据，您可以使用 FormData。

例如：

const formData = new FormData(this);

将其添加到表单提交事件中

FormData 现在包含表单的所有字段

您可以像这样访问它们：

formData.get('username');
formData.get('email');

您还可以迭代所有字段：

    for(let [key, value] of formData) 
    {
      console.log(key, value); 
    }