Вставка Ajax в базу данных возвращает ошибку 404 в WordPress

Question

Я пытаюсь вставить простую форму в базу данных через ajax без обновления страницы в Wordpress.

По какой-то причине, когда я нажимаю кнопку подтверждения, у меня появляется сообщение, что страница не найдена - ошибка 404.

Я добавил это в мою тему function.php

add_action('wp_enqueue_scripts', 'my_ajax_scripts'); 
function my_ajax_scripts(){
    wp_enqueue_script( 'myscript', get_template_directory_uri().'/assets/js/formSubmit.js', array('jquery'), '1.0', true );
    wp_localize_script( 'myscript', 'myajax', array( 'ajaxurl' =>   admin_url( 'admin-ajax.php' ) ) );
}

function applyform(){
        global $wpdb;
        $table = jobs;
        $data = array(
            'name' => $_POST['name'],
            'email'    => $_POST['email'],
            'form_id'    => $_POST['form_id']
        );
        $format = array(
            '%s',
            '%s',
            '%s'
        );
        $success=$wpdb->insert( $table, $data, $format );
        if($success){
            //wp_redirect( site_url('/') );
            die;
        }
}

//ADD THE AJAX HOOKS IN WORDPRESS
add_action('wp_ajax_applyform', 'applyform');
add_action('wp_ajax_nopriv_applyform', 'applyform');

Тогда у меня есть это в formSubmit.js

jQuery(document).ready(function($){ 

    $('#submit').submit(function(e){ // Updated            

        var applicantform = $(this).serialize(); // serializing the form data

        e.preventDefault();

        //ajax call
        $.ajax({
            type:   'POST', 
            action: 'applyform', 
            url:    myscript.ajaxurl, // the functional url     
            data:   myscript.applyform, // all the data of the form (serialized)

            // Displaying succes message
            success: function( data ){
                $('#result').html( 'Success : '.data );
                // for debugging purpose in browser js console
                console.log(data);
            },

            // Displaying error message     
            error: function( error ){
                $('#result').html( 'Error! : '. error );
                // for debugging purpose in browser js console
                console.log(error);
            }               
        });
    });
});

А это форма в модальном окне на странице

<form method="post" id="applicantform">
     <input type="text" name="name" placeholder="Nmae" />
     <input type="hidden" name="form_id" value="<?php echo $post->ID; ?>">
     <input type="email" name="email" placeholder="Email" />
     <input type="submit" name="submit" id="submit" value="Send" />
</form>

Я не вижу ничего в журнале консоли. Ни console.log(data), ни console.log(error). При отправке формы она идет прямо на не найденную страницу.

Answer 1

Сначала проверьте структуру вызовов ajax!
Чтобы этот вызов ajax работал, вы должны отправить свое действие в объекте «data». Данные формы, которые вы собрали и поместили в переменную «Applicant», также отсутствуют.

Обновление Похоже, вы путаете свой назначенный URL AJAX! Вместо использования myscript.ajaxurl вы должны использовать myajax.ajaxurl

Ajax Call

 //ajax call
        $.ajax({
            type:   'POST', 
            url:    myajax.ajaxurl, // ajax url you assigned!   
            data: {
                 action: 'applyform',   // send your action within data 
                 formdata: applicantform, // all the data of the form (serialized)
            },

            // Displaying succes message
            success: function( data ){
                $('#result').html( 'Success : '.data );
                // for debugging purpose in browser js console
                console.log(data);
            },

            // Displaying error message     
            error: function( error ){
                $('#result').html( 'Error! : '. error );
                // for debugging purpose in browser js console
                console.log(error);
            }               
        });

Javascript, включая ajax

Идентификатор вашей формы -> Applicant не соответствует селектору, поэтому вы должны изменить свой селектор вот так!

jQuery(document).ready(function($){ 

    $('#submit_form').click(function(e){        

        var applyformData = $('#applicantform').serialize(); // serializing the form data

        e.preventDefault();

        //ajax call
        $.ajax({
            type:   'POST', 
            url:    myajax.ajaxurl, // ajax url you assigned!   
            data: {
                 action: 'applyform',   // send your action within data 
                 formdata: applyformData, // all the data of the form (serialized)
            },

            // Displaying succes message
            success: function( data ){
              window.location.replace("https://example.org");
            },

            // Displaying error message     
            error: function( request ){
                $('#result').html( 'Error! : '. error );
                // for debugging purpose in browser js console
                console.log(request); 
            }               
        });
    });
});

Серверная часть PHP

поскольку вы сериализовали свои данные, вы должны использовать parse_str на стороне php. https://www.w3schools.com/php/func_string_parse_str.asp

function applyform(){
        global $wpdb;

        if (!check_ajax_referer( 'my_nonce' )){
        wp_die();
        }

        $table = jobs;

    // serialized data from ajax
        $formdata = $_POST['formdata'];

   // use parse_str to unserialize
        parse_str($formdata, $formdata_array);

   // accessing your data like...
        $data = array(
            'name' => $formdata_array['name'],
            'email' => $formdata_array['email'],
            'form_id' => $formdata_array['form_id']
        );

        $format = array(
            '%s',
            '%s',
            '%s'
        );
        $success=$wpdb->insert( $table, $data, $format );
        if($success){
        // do something
            die();
        }
die();
}

Безопасность

По соображениям безопасности вы должны рассмотреть возможность использования wp_nonce_field('my_nonce');.
https://codex.wordpress.org/Function_Reference/wp_nonce_field

Использование следующего фрагмента внутри формы создает одноразовый номер безопасности, который необходимо проверить на стороне сервера.

<form method="post" id="applicantform" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<input type="hidden" name="form_id" value="<?php echo $post->ID; ?>">
<?php wp_nonce_field( 'my_nonce' ); ?>
</form>
<button type="button" id="submit_form">Send</button>

Серверы внутри вашей функции applyform просто отметьте как ...

if (!check_ajax_referer( 'my_nonce' )){
wp_die();
}

Answer 2

Попробуйте вместо этого. Вы не сериализуете данные формы, ориентируясь на отправку.

$('#applicantform').submit(function(e){        

    var applyformData = $(this).serialize(); // serializing the form data

    e.preventDefault();

    //ajax call
    $.ajax({
        type:   'POST', 
        url:    myajax.ajaxurl, // the functional url     
        data:   {
            data: applyformData, // all the data of the form (serialized)
            action: 'applyform',
          } 

        // Displaying succes message
        success: function( data ){
            $('#result').html( 'Success : '.data );
            // for debugging purpose in browser js console
            console.log(data);
        },

        // Displaying error message     
        error: function( error ){
            $('#result').html( 'Error! : '. error );
            // for debugging purpose in browser js console
            console.log(error);
        }               
    });
});