为什么ajax在插入数据库时无法正常工作

Question

我将制作一个在提交后调用ajax的表单。然后我将通过ajax做两件事：首先，我将在同一页面底部的表格中显示用户输入的信息。其次，信息存储在数据库中。 但只进行了第二个操作（数据库中的数据存储），并没有进行第二个操作。

这是我的html

 <div class="container mt-5 w-50 p-5 bg-warning-subtle">
        <form id="form1">
            <label for="username" class="form-label">username</label>
            <input type="text" class="form-control" id="username" name="username">
            <label for="email" class="form-label">Email</label>
            <input type="text" class="form-control" id="email" name="email">
            <label for="password" class="form-label">password</label>
            <input type="text" class="form-control" id="password" name="password">
            <button type="submit" class="btn btn-warning px-5 mt-4 fw-bold">go</button>
        </form>
    </div>
    <div class="container mt-5 w-50 p-5 bg-secondary">
        <h1 class="text-primary-emphasis text-center">my table</h1>
        <table class="table table-dark table-striped">
            <thead>
                <tr>
                    <th class="text-warning" scope="col">#</th>
                    <th class="text-warning" scope="col">First</th>
                    <th class="text-warning" scope="col">Last</th>
                    <th class="text-warning" scope="col">Handle</th>
                </tr>
            </thead>
            <tbody id="tBody">

            </tbody>
        </table>
    </div>

这是我的js

$('body').on('submit', '#form1', function (e) {
        // e.preventDefault();

        const fields = $(this).serialize();

        $.ajax({
            url: baseUrl.ajax_url,
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'sendContactFormData1',
                userData: fields,
                security: baseUrl.nonce
            },
            success: function (response) {
                var i = $("tBody > tr").length + 1;
                $(`<tr>
                <th scope="row">${i}</th>
                <td>${response.username}</td>
                <td>${response.email}</td>
                <td>${response.password}</td>
            </tr>`).appendTo("#tBody");
                i++;
                $("#username").val("")
                $("#email").val("")
                $("#password").val("")
                console.log(response);
            },
            error: function (error) {

                console.log(error);
            }
        });
        return false;
    });

这是我的 php 函数

function sendContactFormDataCallback()
{
    check_ajax_referer('ajax_nonce', 'security');
    $sendData = [];
    parse_str($_POST['userData'], $sendData);

    $returnData = ["username" => $sendData['username'], "email" => $sendData['email'], "password" => $sendData['password']];

    echo json_encode($returnData);

    global $wpdb;

    $send_to_db = $wpdb->insert("clients", array(
        "userName" => $sendData["username"],
        "email" => $sendData["email"]
    ));
    if ($send_to_db) {
?>
        <script>
            alert("successfully")
        </script>
<?php
    }

    wp_die();
}


add_action('wp_ajax_nopriv_sendContactFormData1', 'sendContactFormDataCallback');
add_action('wp_ajax_sendContactFormData1', 'sendContactFormDataCallback');

我在控制台中看到一个有趣的事情。 js 显示了与记录错误相关的代码行，而没有错误，一切都显示操作成功。

我的控制台

Answer 1

将 php 函数中的

<script>

标签移到 success 函数中的 js 端（console.js），从 php 向 js 发送数据应该是

wp_die()

之前的最后一步。

function sendContactFormDataCallback()
{
    check_ajax_referer('ajax_nonce', 'security');
    $sendData = [];
    parse_str($_POST['userData'], $sendData);

    $returnData = ["username" => $sendData['username'], "email" => $sendData['email'], "password" => $sendData['password']];

    global $wpdb;

    $send_to_db = $wpdb->insert("clients", array(
        "userName" => $sendData["username"],
        "email" => $sendData["email"]
    ));
    $returnData['send_to_db_result'] = $send_to_db;
    echo json_encode($returnData);
    wp_die();
}