Execute a PHP function in a file of functions from a JavaScript function

Question

I want to call a PHP function from a JavaScript function.

"Why?" you might ask?

I have a series of PHP functions organized in a separate file custom_functions.php

I am slowly learning how to build with JavaScript and jQuery so this is how I am bridging the gap. I am more familiar with PHP, so I am finding my way through that window.

I have a list of elements constructed in index.php. A list of items is constructed on the fly from the database and an id attribute is created based on the id of the record:

echo "<span id="content_" . $row{'unique_id'} . "\" onClick=\"displayDetails(" . $row{'unique_id'} . ")\">";

displayDetails(record_no) is a JavaScript function in an external JavaScript file.

For now I tried this:

function displayDetails(record){
    data = {};
    //data = <?php retrieveContent(content_id); ?>
    $('.output').html("Testing Function - Section " + section_number);
}

But of course this does not work because PHP is Server Side action and JavaScript is a client-side action.

My particular problem is just enough different from this one to leave me stumped.

I have a PHP file and within it I want AJAX to call a specific function from a range of functions in the file.

What's not clear is how to call the function in the file with do that with AJAX. Do I pass in the URL like this: "custom_functions.php?functionname=displaydetails&record=<some number>" ?

For now, I do not want to use jQuery AJAX, I'd like to understand the fundamentals of XMLHttpRequest purely from a pure JavaScript/DOM perspective.

Answer 1

Yes, You have to call your PHP file like you mentioned.

When calling PHP script by AJAX, return data is generally JSON formation. What you echo in PHP will become AJAX Result.

And Javascript do the job creating elements to show and inject the data.

However, you can also inject the result HTML of PHP script directly to the DOM.

Example1: Injecting ajax response data directly to the DOM

Javascript

axios.get('/example_api.php').then(resp => {
    // in this case, you gonna just put response data into innerHTML where you wanna show.
    someDomeElement.innerHTML = resp.data;
});

PHP (example_api.php)

echo "<p>hello world</p>";

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Example2: When ajax response data is json

Javascript

axios.get('/example_api.php').then(resp => {
    resp.data.forEach(function(item) {
       // In this case, you have to create DOM elements to show data 
       createElement(item); 
    });
});

PHP(example_api.php)

echo json_encode(array('data1', 'data2'));

update

I will update answer here if you comment more questions.