WordPress Admin Ajax 400 error, returning 0-CodePudding

I've created an AJAX request to send data to my plugin which will then submit a job application. When submitting the form the page that it is returning is blank other than a 0 and the console is showing a 400 error for admin-ajax.php.

This code has now been updated from Plamen's suggestions, I realise the $data variable now may not be doing anything

The action of my form is below:

<form method="POST" id="job-application-form" action="<?php echo admin_url( 'admin-ajax.php' ) ?>" >

This is the code on my form page:

<script type="text/javascript">
    jQuery(function($) {
        $('#job-application-form').on('submit', function(e) {
            var form = $(this);
            var data = form.serialize();
            
            $.post(form.attr('action'), data, function(response) {
                console.log(form.attr('action'));
                alert('Got this from the server: '   response);
            });
            
            e.preventDefault();

            return false;
        });
    });
</script>

And this is the code on my plugin function:

<?php

    add_action( 'wp_ajax_submit_post', 'submit_post' );
    add_action( 'wp_ajax_nopriv_submit_post', 'submit_post' );

    function submit_post() { 

        $actual_link = parse_url('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']);
        $parts = explode('/', $actual_link['path']);
        $job_id = $parts[count($parts)-1];

        $curl = curl_init();

        $firstName = $_POST['firstName'];
        $lastName = $_POST['lastName'];
        $email = $_POST['email'];
        $phone = $_POST['phone'];
        $postcode = $_POST['postcode'];
        // $info = $_GET['info'];

        $data = array(
            'firstName' => $firstName,
            'lastName'  => $lastName,
            'email'     => $email,
            'phone'     => $phone,
            'address'   => $postcode,
        );
        $payload = json_encode($data);

        var_dump($job_id);
        var_dump($payload);

        $token_url = "/home/.token";
        $file = fopen($token_url, "r") or die("Unable to open job ads file!");
        $access_token_new = fread($file,filesize($token_url));

        curl_setopt_array($curl, array(
            CURLOPT_URL => The API URL . $job_id .'/applications',
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_ENCODING => '',
            CURLOPT_MAXREDIRS => 10,
            CURLOPT_TIMEOUT => 0,
            CURLOPT_FOLLOWLOCATION => true,
            CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_POSTFIELDS => $payload,
            CURLOPT_HTTPHEADER => array(
                'Authorization: Bearer ' . $access_token_new,
                'Content-Type: application/json',
            ),
        ));

        fclose($file);

        $response = curl_exec($curl);

        curl_close($curl);

        var_dump($response);

        wp_die();
    }

?>

From what I've gathered my ajax request cannot find my plugin function but I'm not sure if I've messed up the naming or what's going on.

CodePudding user response：

You need to pass the payload of the HTTP POST request in a compatible format.

The simplest would be to change your code to the following:

Add a hidden field named "action" with as follows:

<form method="POST" id="job-application-form" action="<?php echo admin_url( 'admin-ajax.php' ) ?>" >
  ...
  <input type="hidden" name="action" value="submit_post">
</form>

Then change your JavaScript implementation like this, no need to get the Ajax URL with PHP, you have it in the <form> action attribute:

jQuery(function($) {
  $('#job-application-form').on('submit', function(e) {
    var form = $(this);
    var data = form.serialize();
      
    $.post(form.attr('action'), data, function(response) {
       console.log(form.attr('action'));
       alert('Got this from the server: '   response);
    });
    
    e.preventDefault();

    return false;
  });
});