POST http://domain/wp-admin/admin-ajax.php 400（错误请求）

Question

我已经设置了一个使用 AJAX 将数据发送到数据库表的表单，但在提交表单时收到“400 Bad Request”错误。

这是我的设置：

我的 WordPress 网站中有一个表单，用于收集用户信息（名字、姓氏）。 提交表单后，数据将通过 AJAX 发送到我的子主题的

functions.php

文件中定义的 PHP 函数 (add_address)。 PHP 函数应该清理数据并将其插入到自定义数据库表 (pl_addresses) 中。 这是相关代码：

add_action('wp_ajax_add_address', 'add_address');
add_action('wp_ajax_nopriv_add_address', 'add_address');

function add_address()
{
    global $wpdb;

    // Sanitize input data
    $name = sanitize_text_field($_POST['address-firstname']);
    $lastname = sanitize_text_field($_POST['address-lastname']);
    

    // Prepare and execute SQL query using prepared statements
    $wpdb->insert(
        'pl_addresses',
        array(
            'name' => $name,
            'lastname' => $lastname,
        ),
        array(
            '%s', '%s'
        )
    );
}

这是

.js

文件中的JavaScript代码：

jQuery('#add_address_form').on('submit', function () {
    var form_data = jQuery(this).serializeArray();

    form_data.push({ "name": "security", "value": ajax_nonce });

    console.log('Form data:', form_data); 
    console.log('AJAX URL:', ajax_url);    

    jQuery.ajax({
        url: ajax_url, 
        type: 'post',
        data: form_data,
        success: function (response) {
            console.log('AJAX Response:', response);
            alert(response);
        },
        fail: function (err) {

            console.error("There was an error: " + err); 
            alert("There was an error: " + err);
        }
    });

    return false;
});

此 HTML 表单：

<form id="add_address_form" method="post" action="" class="form-horizontal form-control-borderless display-none">
    <h4 class="sub-header"><i class="gi gi-home"></i><span>Pridėti pristatymo adresą</span></h4>
    <div class="form-group col-md-12">
        <div class=" col-md-6 col-xs-12">
            <div class="input-group">
                <span class="input-group-addon"><i class="gi gi-user"></i></span>
                <input type="text" id="address-firstname" name="address-firstname" class="form-control input-lg" placeholder="Vardas *" required>
            </div>
        </div>
        <div class=" col-md-6 col-xs-12">
            <div class="input-group">
                <span class="input-group-addon"><i class="gi gi-user"></i></span>
                <input type="text" id="address-lastname" name="address-lastname" class="form-control input-lg" placeholder="Pavardė *" required>
            </div>
        </div>
    </div>
    <div class="form-group form-actions col-md-12">
        <div class="col-xs-6 text-right" style="width:auto;">
            <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-plus"></i> Užregistruoti</button>
        </div>
    </div>
</form>

head 标签中也有此代码：

<script type="text/javascript">
    var ajax_url = '<?php echo admin_url("admin-ajax.php"); ?>';
    var ajax_nonce = '<?php echo wp_create_nonce("secure_nonce_name"); ?>';
</script>

我收到这样的错误：

我已确认 AJAX URL 和随机数设置正确。但是，当我提交表单时，我在控制台中收到“400 Bad Request”错误，并且 AJAX 请求失败。

什么可能导致此问题？任何有关故障排除或调试的建议将不胜感激。

Answer 1

试试这个代码。你错过了

action: 'add_address'

jQuery('#add_address_form').on('submit', function () {
    var form_data = jQuery(this).serializeArray();

    form_data.push({ "name": "security", "value": ajax_nonce });

    console.log('Form data:', form_data); 
    console.log('AJAX URL:', ajax_url);    

    jQuery.ajax({
        url: ajax_url, 
        type: 'post',
        data: {
            action: 'add_address',
            formdata: form_data
        },
        success: function (response) {
            console.log('AJAX Response:', response);
            alert(response);
        },
        fail: function (err) {

            console.error("There was an error: " + err); 
            alert("There was an error: " + err);
        }
    });

    return false;
});