Question

我有一张表格：

<form onsubmit="return sendEmail()" id="emailForm" name="emailForm">
                   <input type="hidden" name="_cc" value="email2@gmail.com" />
                    <div class="row">
                        <p class="left">
                            <label for="name">Name*</label>
                            <input type="text" required="required" name="name" id="name" value="" />
                        </p>
                        <p class="right">
                            <label>Email*</label>
                            <input type="email" required="required" name="_replyto">
                        </p>
                    </div>

                    <div class="row">
                        <p class="left">
                            <label for="phone">Phone/Mobile</label>
                            <input type="text" required="required"  name="phone" id="phone" value="" />
                        </p>
                        <p class="right">
                            <label for="company">Organization</label>
                            <input type="text" name="company" id="company" value="" />
                        </p>
                    </div>

                    <p>
                        <label for="message" class="textarea">Queries</label>
                        <textarea class="text" name="message" id="message"></textarea>
                    </p>
                <br />
                    <div style="background-color: mediumaquamarine;margin-bottom: 2%" id="success"></div>
                    <button type="submit" class="btn btn-xl">Send</button>

</form>

和jquery代码使用ajax post提交表单：

    function sendEmail(){
        $.ajax({
            url: "http://formspree.io/email1@gmail.com",
            method: "POST",
            data: $('#emailForm').serialize(),
            dataType: "json",
            success: function(result){
                $("#success").html("Message successfully sent");
            },
            error: function (request, status, error) {
                $("#success").html("Oops! Something went wrong. Please try again");
            }
        });
        return false
    }

但它始终提交get请求并导致错误响应，不允许使用get方法，仅使用post。（405响应代码）。

无法弄清楚这里有什么不对。

Answer 1

ajax为asynchronus单击按钮并且ajax方法在后台运行时，会立即触发您的表单提交。这就是它触发get的原因。

由于GET是默认的http方法。看这里： https://www.w3.org/TR/html401/interact/forms.html#h-17.3 如果你看一下控制台，它也应该在那之后触发（发布）。

请改为尝试：

<form id="emailForm" name="emailForm">

在js：

$('#emailForm').submit(function (e){
    // stop the default form submit behaviour
    e.preventDefault();
    $.ajax({
        url: "http://formspree.io/email1@gmail.com",
        method: "POST",
        data: $('#emailForm').serialize(),
        dataType: "json",
        success: function(result){
            $("#success").html("Message successfully sent");
        },
        error: function (request, status, error) {
            $("#success").html("Oops! Something went wrong. Please try again");
        }
    });
    return false
});

Answer 2

您获得的错误可能与服务器或服务器代码中的内容有关。

尝试将请求标头和参数复制到json poster并尝试从那里发送请求，如果您仍然收到错误，表示它在您的服务器中，或者您的请求丢失了某些标头可能。

在您设法发送有效的帖子请求之后，将其转换为ajax请求将更容易匹配。

Answer 3

将method更改为type，如下所示

function sendEmail(){
        $.ajax({
            url: "http://formspree.io/email1@gmail.com",
            type: "POST",
            data: $('#emailForm').serialize(),
            dataType: "json",
            success: function(result){
                $("#success").html("Message successfully sent");
            },
            error: function (request, status, error) {
                $("#success").html("Oops! Something went wrong. Please try again");
            }
        });
        return false
    }

Ajax请求提交get而不是post

3 个答案: