Ajax表单发布问题

时间:2018-10-18 09:19:29

标签: jquery ajax forms post

我正在使用Godaddy表单电子邮件URL从托管页面中的表单发送电子邮件。表单将字段发布到“ gdform.php”,它发送电子邮件并重定向到我的页面。发布和重定向时没有任何问题。由于它再次刷新/加载页面,所以我想用ajax发布表单。当我使用ajax时,无法收到任何电子邮件。我比较了请求和响应头。在我放置一些标头之后,它们现在显示相同的请求/响应数据。我可以从ajax请求获得响应,该请求是重定向的页面内容。这意味着表单已成功发送到gdform.php并重定向到我的页面。 我不明白为什么ajax表单发布无法成功发送电子邮件并获得回复。

//联系表格

<form id="main-contact-form" name="contact-form" method="post" action="gdform.php">
<input type="text" name="name">
<input type="email" name="email">
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Submit">

<input type="hidden" name="subject" value="Form Submission" />
<input type="hidden" name="redirect" value="index.html" />
<input type="hidden" name="form_order" value="alpha"/>
<input type="hidden" name="form_interval" value="default"/>
<input type="hidden" name="form_format" value="html"/>
</form>

//联系表格js

var form = $('#main-contact-form');
form.submit(function(event){
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded",
        headers: { "Upgrade-Insecure-Requests": "1",
                    Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
        },
        crossDomain: true,
        url: $(this).attr('action'),
        beforeSend: function(){
            form.prepend(form_status.html('Email is sending...'));
        }
    }).done(function(data){
        console.log("done " + data);
        form_status.html('Thank you for contact us.');
    });
});

1 个答案:

答案 0 :(得分:1)

您似乎没有在发布请求中包含数据。

在传递给.ajax的对象中包括“数据”属性:

$.ajax({
    type: "POST",
    contentType: "application/x-www-form-urlencoded",
    headers: { "Upgrade-Insecure-Requests": "1",
                Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
    },
    crossDomain: true,
    url: $(this).attr('action'),
    data: someData, # <----------HERE
    beforeSend: function(){
        form.prepend(form_status.html('Email is sending...'));
    }
})

您将需要从要发送的dom元素中对此进行整理。我认为您可以使用.serialize()完成此操作,例如:

let someData = $('#main-contact-form').serialize();