WordPress AJAX 400提交表单时请求错误

Question

几天以来，我的AJAX状况很差，并且试图提交表单并将记录插入到自定义表中，但是却无法正常工作。

我在控制台上收到400错误的请求错误。请看一下代码。

  

事实上，我尝试了多种提交数据的方法，但是没有一个   有效。

HTML

<form class="addtocartform" id="gsAddToCart" method="POST">
    <label class="gs-label" for="options">Options</label>
    <select class="gs-select-box" id="product_option" name="product_option">
        <option value="0">Somnath</option>
        <option value="1">Dwarka</option>
        <option value="2">Rameshwaram</option>
    </select>
    <label class="gs-label" for="qty">Qty.</label>
    <input class="gs-number" id="qty" min="1" name="qty" step="1" type="number" value="1">

        <button class="gs-button order-button add-to-cart-button">
            <i class="fa fa-cart-plus"></i>
            <span class="gs-button-label">Add to Cart</span>
        </button>

        <input id="product" name="product" type="hidden" value="160"/>
        <input id="group_id" name="group_id" type="hidden" value="194"/>
    </input>
</form>

WordPress挂钩-排队脚本

function gs_enqueue_ajax_scripts()
{

    wp_register_script('gs-ajax', GROUP_SHOP_ROOT . 'public/js/add-to-cart-ajax.js', ['jquery'], 1.0, TRUE);
    wp_localize_script('gs-ajax', 'ajax_vars', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('gs_nonce'),
    ]);
    wp_enqueue_script('gs-ajax');

}

add_action('wp_enqueue_scripts', 'gs_enqueue_ajax_scripts');

WordPress挂钩-处理和插入数据

function gs_add_to_cart_ajax()
{

    check_ajax_referer('gs_nonce', $_POST[ 'nonce' ], FALSE);

    // validating stuffs ..

    $cart = new Group_Shop_Cart();
    $cart->add_to_cart($_POST[ 'group_id' ], $_POST[ 'product' ], $_POST[ 'qty' ], $_POST[ 'product_option' ]);

    wp_die();
}

add_action('wp_ajax_gs_add_to_cart_ajax', 'gs_add_to_cart_ajax');
add_action('wp_ajax_nopriv_gs_add_to_cart_ajax', 'gs_add_to_cart_ajax');

Javascript

(function ($) {

    $(document).on("click", ".add-to-cart-button", function () {

        let data = JSON.stringify({
            action: 'gs_add_to_cart_ajax',
            group_id: $('#group_id').val(),
            product: $('#product').val(),
            qty: $('#qty').val(),
            product_option: $('#product_option').val(),
        });

        $('form.addtocartform').on('submit', function (e) {
            e.preventDefault();

            $.ajax({

                method: 'POST',
                dataType: 'json',
                nonce: ajax_vars.nonce,
                url: ajax_vars.ajax_url,
                data: data,
                success: function (response) {
                    alert("Success");
                }

            });
        });

    });

})(jQuery);

我不知道此代码未提交有什么问题。

修改后的代码

$.ajax({

    method: 'POST',
    dataType: 'json',
    nonce: ajax_vars.nonce,
    url: ajax_vars.ajax_url,
    data: {
        action: 'gs_add_to_cart_ajax',
        group_id: $('#group_id').val(),
        product: $('#product').val(),
        qty: $('#qty').val(),
        product_option: $('#product_option').val(),
    },
    success: function (response) {
        alert("Success");
    }

});