数据库中的Ajax插入在WordPress中返回404错误

Question

I'm trying to insert simple form in database trough ajax without refreshing the page in Wordpress.

For some reason when I click on submit button I've got that the page isn't found - 404 error.

I have added this to my theme 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');

Then I have this in the 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);
            }               
        });
    });
});

And this is the form in modal window on the page

<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>

I don't see anything in the console log. Not console.log(data) nor console.log(error) . On form submit it goes straight to not found page.

Answer 1

Try this instead. You're not serializing the form data by targeting the submit.

$('#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);
        }               
    });
});

Answer 2

First, check your ajax call structure!
To make this ajax call work, you have to send your action within "data" object. The form data you've collected and dumped into a variable "applicantform" is missing also.

Update it looks like you are confusing your assigned ajax url! Instead of using myscript.ajaxurl you have to use 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 including ajax

Your form id -> applicantform doesn't match the selector, so you have to change your selector like this!

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); 
            }               
        });
    });
});

Serverside PHP

since you've serialized your data you have to use parse_str on php side. 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();
}

Security

For security reasons you should consider using wp_nonce_field('my_nonce'); .
https://codex.wordpress.org/Function_Reference/wp_nonce_field

Using the following snippet inside your form creates a security nonce you have to verify serverside.

<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>

Serverside inside your function applyform just check like...

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