Question

使用Ajax发布表单时，我看到所有数据完全为空。结果从我发布到的php页面返回，因此ajax调用工作正常。

这是我的ajax代码：

$("#vacature-form").on('submit',(function(e){
    e.preventDefault();
    grecaptcha.ready(function() {
     // do request for recaptcha token
     // response is promise with passed token
     grecaptcha.execute('6LdtbqEUAAAAAMU9yt7aKM0H0xUqXpQOsNhn0nNA', {action: 'new_email'}).then(function(token) {
         // add token to form
         $('#vacature-form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
         $.ajax({
            url: "mail/mail_send.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                $(".error-container2").slideDown().html(data);
            },
            error: function(){
                console.log('oops');
            }
        });
     });
    });
}));

这是我的html表单：

<form id="vacature-form" action="mail/mail_send.php" enctype="multipart/form-data" method="post" class="contact_form row contact-form" role="form">
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="name" class="form-control form-control-name" tabindex="1" maxlength="35" required="">
        <label class="control-label">Naam</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <select class="geslacht form-control geslacht-control" name="geslacht" required>
            <option value="" disabled selected>Kies uw geslacht</option>
            <option value="Man">Man</option>
            <option value="Vrouw">Vrouw</option>
        </select>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="place" class="form-control form-control-place"tabindex="1" maxlength="35" required="">
        <label class="control-label">Woonplaats</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="phone" class="form-control form-control-phone" tabindex="1" maxlength="35" required="">
        <label class="control-label">Telefoonnummer</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="file" name="files[]" class="file-control form-control form-control-file" tabindex="1" maxlength="35" multiple>
        <label class="control-label">Upload je CV</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <input type="text" name="email" class="form-control form-control-email h5-email" tabindex="1" maxlength="35" required="">
        <label class="control-label">Emailadres</label>
    </p>
    <p class="col-sm-12 kl-fancy-form">
        <textarea name="message" class="form-control form-control-message" cols="30" rows="10" tabindex="4" required=""></textarea>
        <label class="control-label">Bericht</label>
    </p>
    <p class="col-sm-12">
        <button class="btn btn-fullcolor sendbutton" type="submit">Verzenden</button>
    </p>
    <div class="col-sm-12">
        <div class="error-container2 lean"></div>
    </div>
</form>

我尝试将enctype="multipart/form-data"添加到表单中，但这没有任何改变。

我的网络标签中的

Form Data不显示任何内容，甚至不显示表单中输入字段的名称，而是完全空白。我该如何解决？

Answer 1

您正在this内在promise resolve回调中获取表单，但您应该这样做

$("#vacature-form").on('submit',(function(e){
        e.preventDefault();
        var form = e.target;
        grecaptcha.ready(function() {
         // do request for recaptcha token
         // response is promise with passed token
         grecaptcha.execute('6LdtbqEUAAAAAMU9yt7aKM0H0xUqXpQOsNhn0nNA', {action: 'new_email'}).then(function(token) {
             // add token to form
             $('#vacature-form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
             $.ajax({
                url: "mail/mail_send.php",
                type: "POST",
                data:  new FormData(form),
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){
                    $(".error-container2").slideDown().html(data);
                },
                error: function(){
                    console.log('oops');
                }
            });
         });
        });
    }));

尝试使用Ajax发布FormData时，Form没有发布任何内容

1 个答案: