Невозможно получить AJAX отправку на работу для обновления post_content

Question

Итак, у меня есть некоторые проблемы с отправкой формы AJAX, и я не могу понять, почему ниже я объясню все шаги, которые я предприму, чтобы попытаться отправить форму.

Сценарии поставлены в очередь [РАБОТЫ] : Гарантирует, что файл, содержащий запрос ajax, загружен.

function enqueue_scripts()
{
    if (!is_admin()) {
        wp_register_script('profile_edit_submit', content_url() . '/mu-plugins/fleishmanhillard/scripts/frontend-profile-edit.js', ['jquery'], '', true);
        wp_localize_script( 'profile_edit_submit', 'profile_edit', [
            // This will generate the admin URL that we can use on the front-end of our website
            'ajax_url' => admin_url('admin-ajax.php'),
            // Pass in a custom nonce name for JS
            'nonce' => wp_create_nonce('update_profile_validation'),
        ]);
        wp_enqueue_script('profile_edit_submit');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

Это обновляет сообщение Post_content идентификатора [ WORKS ]: при отправке обновляет содержимое базы данных с правильным идентификатором.

if (strtolower($_SERVER['REQUEST_METHOD']) === "post") {

    // @todo: Make sure that the account is associated with the logged in account on profile edits

    // If profile isn't empty, continue
    if (!empty($profile)) {

        // Grab the content submitted
        // @todo: Figure out how to set the $_POST request to a function
        $post_content = $_POST['content'];

        wp_update_post([
            'ID' => $profile->get_id(),
            'post_content' => $post_content,
        ]);
    }
}

HTML [WORKS] :

<form action="" id="profile_update" method="POST">
    <input type="text" name="content" id="post_content" class="required">
    <input type="hidden" name="submitted" id="submitted" value="true" />
    <button type="submit"><?= 'Update Post' ?></button>
</form>

---

ПРОБЛЕМА : Итак, отправка работает, но она обновляет страницу при отправке, но я бы хотел перейти к отправке AJAX, но я не не знаю, с чего начать .. вот что у меня есть, но оно работает неправильно.

(function ($) {
    $(function($) {
        $('.profile_update').on('click', function() {
            $.ajax({
                type: 'POST',
                url: profile_edit.ajaxurl,
                data: {
                }
            });
        });
    });
})(jQuery);

Когда я отправляю форму, она обновляет базу данных, а также изменяет запрос сервера с GET на POST.

Answer 1

мы должны изменить javascript.

(function ($) {
    $(function($) {
        $('#profile_update').on('submit', function(e) {
            $.ajax({
                type: 'POST',
                url: profile_edit.ajaxurl,
                data: $('#profile_update').serialize();
            });
            return false;
        });
    });
})(jQuery);

Answer 2

измените html таким образом

<form action=""  method="POST">
   <input type="text" name="content" id="post_content" class="required">
   <input type="hidden" name="submitted" id="submitted" value="true" />
   <button type="button" id="profile_update"><?= 'Update Post' ?></button>
</form>

вы выбираете класс CSS с помощью . в jQuery, которое вам нужно использовать # должно быть

$('#profile_update')