通过 Ajax 提交表单 - FormData 和序列化不起作用答案

【问题标题】：Submitting form via Ajax - FormData and serialize not working通过 Ajax 提交表单 - FormData 和序列化不起作用
【发布时间】：2019-04-17 09:49:19
【问题描述】：

我试图通过 ajax 提交带有数据的表单，但我的表单数据数组始终为空。你能帮我吗。我尝试了两种方法 serialize 和 FormData，但都以空数组作为响应。

jQuery 代码：

    $("#inschrijvencursus").submit(function(e) {
                        e.preventDefault();
                        var fd = $("#inschrijvencursus").serialize();
                        // var fd = new FormData(this);
                        $.ajax({
                            url: "/wp-content/themes/tweb/page-cursistenopgeven.php",
                            data: fd,
                            // cache: false,
                            // processData: false,
                            // contentType: false,
                            type: 'POST',
                            success: function (data) {
                                console.log(data);
                                $('#formdata').html(data);
                            }  
                        });

表格：

<form method="post" id="inschrijvencursus">
    <div class="form-group">
        <label for="company-name">Bedrijfsnaam</label>
        <input type="text" class="form-control" id="company" placeholder="Bedrijfsnaam">
    </div>
    <div class="form-group">
        <label for="name">Naam</label>
        <input type="text" class="form-control" id="name" placeholder="Naam">
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">Man</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
        <label class="form-check-label" for="inlineCheckbox2">Vrouw</label>
    </div>
    <div class="form-group">
        <label for="name">Telefoonnummer</label>
        <input type="tel" class="form-control" id="telephone" placeholder="Telefoonnummer">
    </div>
    <div class="form-group">
        <label for="name">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleTextarea">Opmerkingen</label>
        <textarea class="form-control" id="opmerkingen" rows="3"></textarea>
    </div>
    <input type="submit" id="cursussubmit" class="nexttab"></button>
</form>

【问题讨论】：

PHP 和 JS 的 HTML 输出看起来不错。您是否调试过 PHP 以查看它收到的内容？
在 php 页面上我正在执行 print_r($_POST);这输出数组为空。 @RoryMcCrossan
我刚刚发现，当我在序列化函数之后 console.log(fd) 是空的，所以 fd 没有从表单中获取数据，这怎么可能@RoryMcCrossan
页面上是否有多个元素具有相同的inschrijvencursus id？

标签： jquery ajax serialization form-data

【解决方案1】：

刚刚找到解决方案。当您使用序列化函数时，表单中的输入元素需要一个 name="yourname" 才能使用 jquery 发送。

【讨论】：