Ajax 请求提交 get 而不是 post

Posted 2023-03-14

【中文标题】Ajax 请求提交 get 而不是 post

【英文标题】：Ajax request submitting get instead of post

【发布时间】：2016-07-11 06:46:18

【问题描述】：

我有一个表格：

<form onsubmit="return sendEmail()" id="emailForm" name="emailForm">
                   <input type="hidden" name="_cc" value="[e-mail]" />
                    <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/[e-mail]",
            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响应代码）。

不知道这里出了什么问题。

【问题讨论】：

您必须在发送 AJAX 请求之前阻止表单验证。

第一件事，检查文档：api.jquery.com/jQuery.ajax。第二件事，使用submit() 事件处理程序并停止正常的表单提交

你在尝试这个吗？ <form ... method="post">

【参考方案1】：

将method 更改为type 如下

function sendEmail()
        $.ajax(
            url: "http://formspree.io/[e-mail]",
            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
    

【讨论】：

这个解决方案确实有效。奇怪的是，它被否决了。也许这个版本的 jquery 不支持 'method' 关键字。需要谷歌确认！

【参考方案2】：

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/[e-mail]",
        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
);

【参考方案3】：

您遇到的错误可能与您的服务器或服务器代码中的某些内容有关。

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

在您成功发送有效的 post 请求后，将其转换为 ajax 请求会更容易。