AJAX WordPress JSON response always preceded by data request as array

There could be a portion of the remote API’s response body that cannot be properly parsed as JSON. What does the result of error_log($api_response); look like?

The reason content type JSON doesn’t work in your Ajax request is you declare “action” query var with action=send_api_request. When parsed as JSON, it becomes something PHP doesn’t recognize and the construction of WP action hook ‘wp_ajax_send_api_request’ fails to happen as expected.

For proper parsing as JSON it needs to be declared as an object property

{action: 'send_api_request',
 data: '[email protected]'}

thanks for that. It is indeed a portion of the remote API’s response body. Now the point is to understand why and then fix it and I have no clue.

As I said before error_log($api_response) is {message: success} so the correct JSON response. It’s just after wp_send_json that the portion of remote API’s response is appended.

I am aware that with application/json I need to pass the action inside of a json like that {action: ‘send_api_request’, data: ‘[email protected]’}

I did everything as you said but it’s not working! always status 400 and response 0 so I turned to

application/x-www-form-urlencoded

TBH I don’t have much experience with XHR, I usually rely upon jQuery where encoding an object as JSON works there. If form-urlencoded works for you, then there’s little point in doing something else.

If {message: success} is all that’s error logged, it doesn’t make sense that the console log is

Array
(
[email] => [email protected]
)
{message: success}

I suspect the response body is itself an array or object where error_log() is expecting a string. Thus error logging doesn’t give you a full picture of the response body. Maybe you should run the response through print_r() before error logging.
error_log( print_r( $api_response, true ));
The print_r() return is multi-line. I’m not too sure how well error_log() handles multi-line strings. It might be necessary to write to your own custom log file instead of using error_log().

Since the Ajax itself is making a successful round trip, the issue must lie in how the API response body is managed server side. You might find it easier to debug your Ajax handler if you took Ajax out of the picture and focused on the PHP handler itself. You could set up a test bed on a custom page template. Assign appropriate values to $_POST, then call send_api_request() directly. You can then insert debug echo and var_dump() lines into the function and immediately see the output right on the test bed page.

I know it doesn’t make sense. But this issue is very similar to this https://stackoverflow.com/questions/40859629/wordpress-ajax-returns-json-with-php-opening-tag even though I don’t have the PHP tag but just an array coming from my request body.

I did all that and it looks all fine, the API call to the endpoint is all fine, I got the right response, it is just after wp_send_json that the problem comes. I don’t know what to do since the solution for the mentioned link doesn’t work for me. I need to change my local env to see if it is the root cause of that.

The API response body $api_response that you’re sending as JSON contains more than the data you’re looking for. It’s not just plain text. It might even already be JSON, so perhaps it could just be echoed out and not further JSON encoded with PHP. You either need to break out the data you’re interested in with PHP or do so client side with JavaScript.

To break out the email with PHP, you need to know how the complete body response is structured. error_log() is not ideal for representing data structures. var_dump() and print_r() are better for this, but their output is not visible when used in an Ajax handler. Their output needs to be sent to a file, or the Ajax handler needs to be called within a conventional HTTP browser response context.

If you want to manage the API response body client side, you need to JSON.parse() the response so you can properly drill into the data structure to extract the value you’re after.

Hi,

I modified the javascript and server response :

console.log
"API request failed"

I think it’s correct why yours

$api_endpoint = '***';
 $api_key = '***';

modified javascript with use of FormData:

<script id="fpAjax">
         document.addEventListener("DOMContentLoaded", function () {
              sendApiRequestButton.addEventListener("click", function () {
                if( typeof emailInput == undefined ) return;                   
                   let url = "/wp-admin/admin-ajax.php";   
                   requestData = new FormData;
                   requestData.append( 'action', 'fpAction' );
                   requestData.append( 'data',  emailInput.value );
                   //requestData.append( 'necessary nonce code' );
              
                   var xhr = new XMLHttpRequest();
    
                   xhr.onreadystatechange = function () {
                       if (xhr.readyState === XMLHttpRequest.DONE) {

                          // fpSnipResponse.innerHTML = xhr.responseText;
                           console.log(xhr.responseText);
                     
                       }
                   };
     
                   xhr.open('POST', url, true);
                   xhr.send(requestData)
               });
   
           });
    </script>

Modified ajax hooks in php.

add_action( 'wp_ajax_fpAction', 'send_api_request' );
add_action( 'wp_ajax_nopriv_fpAction', 'send_api_request');

I hope this helps. Greetings