仅在 Firefox 上提交表单时，Ajax 收到 400 Bad Request答案

【问题标题】：Ajax getting 400 Bad Request when submitting Form only on Firefox仅在 Firefox 上提交表单时，Ajax 收到 400 Bad Request
【发布时间】：2021-11-10 05:12:17
【问题描述】：

我在 wordpress 中编写了一个 php 代码来使用 ajax 提交表单。它在Chrome上工作很好，但在Firefox上获得400个不好的请求。这是我的代码：

jQuery(document).ready(function($){
    jQuery( 'form[name="contact-me"]' ).on( 'submit', function(e) {
        e.preventDefault();
        var form_data = {};
         $(this).serializeArray().forEach( function(element){
            form_data[element.name] = element.value;
        });
        $.post(zt_send_form_obj.ajax_url, {
            action:      "zt_save_campain_form_data",
            _ajax_nonce:   zt_send_form_obj.nonce,
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            values: JSON.stringify(form_data),
        }, function(data) {
            if (data.success) {
                if(data.data.info.message=='no'){
                    $('#myModal').show();
                    console.log('cod is in')
                }
                if(data.data.info.message=='yes'){
                    $('#CodeModal').show();
                    $('.the_cod_div').append('<span>'+data.data.info.code+'</span>');
                    console.log('data saved');
                }
                
            }
            else{
                console.log("not working");
            }
        });
    });
});

【问题讨论】：

实际响应是什么样的？您的服务器端日志是否会给您提供任何提示？ span>
您似乎错误地使用了$.post()。例如，type 和 contentType 不属于 data 对象。您的意思是改用$.ajax() 吗？如果是，则数据属性是data，而不是values span>
响应返回 0。服务器端日志没有给我任何提示
wordpress状态怎么样？您是否仅在其中一个 chrome 或 firefox 浏览器上登录 wp-admin？您是否设置了两个 wp 操作？一个用于wp_ajax_nopriv_{$action}和一个用于wp_ajax_{$action}？ span>
谢谢您的指导。通过添加** wp_ajax_nopriv _ {$ action} **错误400已修复。 span>

标签： php jquery ajax wordpress

【解决方案1】：

试试这个

$('form[name="contact-me"]').submit(function (e) {
        e.preventDefault();

        var form = $('#form_id')[0]; //set form id

        var varform = new FormData(form);

        varform.append("action", "zt_save_campain_form_data");

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            dataType: 'json',
            data: varform,
            processData: false,
            contentType: false,
            cache: false,
            crossDomain: true,
            success: function (response) {

              //if success do this...
             console.log(response);

            },

            error: function (xhr, textStatus, error) {
                console.log(xhr, textStatus, error);
            }

        })

    });

在您的表单中，您可以将此代码用于 nonce 验证

<?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' ); ?>

【讨论】：