why WP Ajax data printed in the console instead of the page - php

Question

this the first function of the Ajax call runs on focusout woocommerce input fields with check_country_fees action and url '<?php echo admin_url('admin-ajax.php'); ?>' so how to pass the returned data and passing them as arguments normally?
function addEvtListenerToCheckoutPage()
{
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
$(document).ready(function() {
document.getElementById('billing_first_name').addEventListener("focusout", function() {
alert("Hello World!");
if (document.getElementById('billing_first_name') !== "") {
var billing_first_name = document.getElementById("billing_first_name").value;
alert("testajax");
var data = {
action: 'check_country_fees',
billing_first_name: document.getElementById("billing_first_name").value
};
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
if (response.success == true) {
// Handle Success
// let resp = JSON.parse(response.data.json_response);
if (response.success) {
alert(response);
console.log(response);
alert(response);
alert("Sucess");
// Hanle Success Response
}
} else {
console.log(response);
console.log(data);
alert("Sucess");
}
}).fail(function(response) {
// Handle Error
console.log("failing");
console.log(response);
alert("FAIl");
});
}
});
});
});
// document.getElementById("#billing_first_name").addEventListener("input", myFunction);
</script>
<?php
?>
<script language="javascript">
alert("sended addevent");
</script>
<?php
}
when I run the action call function add_action('wp_ajax_check_country_fees', 'testing_ajax_action'); the result printed in the browser console like that
</script>
<script>
alert("sended datasuccess");
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
testing ajaaaaxnullArray
(
[action] => check_country_fees
[billing_first_name] => Stevea
)
Stevea</br>
<script>
alert("test ajaxbilling name");
</script>
SteveaArray
(
)
Receiving data function
function testing_ajax_action()
{
echo "testing ajaaaax";
if (isset($_POST['billing_first_name'])) {
$billing_first_name = $_POST['billing_first_name'];
$billing_first_name = json_decode($billing_first_name);
extract($_POST);
print_r($_POST);
$billing_first_name2 = json_decode($_POST['billing_first_name_post']);
//testingajax($billing_first_name);
testingajax($billing_first_name);
} else {
return 0;
}
}

Answer 1

You need to send the data back from the backend to the frontend.
Here is a crude basic diagram of an ajax request:
Event → JS request → PHP Processing → PHP Response → JS Handling
If you're not sending any data with your PHP response then you can't handle it on the front end.
You can use wp_send_json_success() and wp_send_json_error() to send the appropriate response success/error status and attach to it any relevant data you want to handle on the front end.
By convention, the PHP Processing function is usually anonymous.
From a security standpoint you should implement a nonce system too. You can refer to the following answer about using Ajax the right way in WordPress.
Coming back to your problem, you can pass an array through wp_send_json_success.
<?php
add_action( 'wp_ajax_{$action}', function () {
if ( check_ajax_referer( '_ajax_nonce' ) ) {
//...
$data = array(
'timestamp' => time(),
'key' => 'value',
//...
);
wp_send_json_success( $data );
} else {
wp_send_json_error();
};
} );
On the javascript handling side, you would intercept it and do something with it:
$.ajax({
//...
success: ( response ) => {
console.log( response.data );
//...
},
//...
});