Adding PHP to dynamically created div content - php

Question

I am making a website with a submenu, which renders content to a div. The website is powered by Wordpress, and this part of the site is a plugin I've made. I want the content of the div to fetch info from database, i.e. I want to add PHP code. Can't seem to add any PHP though. If I make the loaded content a PHP file, it doesn't work due to the jQuery('#pageContent').html(msg) in the JS, and if I add PHP code to a HTML file, that code doesn't seem to be recognised. What would be the way to do this? I should perhaps add that the PHP I want to add is to be part of a form and as far as I can see needs to be in the same file as the HTML.
Here is the JS function with Ajax to load content:
function loadPage(url) //the function that loads pages via AJAX
{
url=url.replace('#page',''); //strip the #page part of the hash and leave only the page number
jQuery('#loading').css('visibility','visible'); //show the rotating gif animation
jQuery.ajax({ //create an ajax request to load_page.php
type: "POST",
url: ajax_object.ajax_url,
data: {
action: 'ajax_request2',
page: url //with the page number as a parameter
},
dataType: "html", //expect html to be returned
error: function(xhr, textStatus, textError) {
console.log(textError);
},
success: function(msg) {
window.alert("Working loadPage ajax!");
if(parseInt(msg)!=0) //if no errors
{
jQuery('#pageContent').html(msg); //load the returned html into pageContent
jQuery('#loading').css('visibility','hidden'); //and hide the rotating gif
}
}
});
}

Answer 1

I modified your function a little bit and directed it to a test site for JSON data. This little snippet works. Maybe it is helpful to you?
As the test site only returns JSON the "html" I put into #pageContent is not really html, but I hope you get the point nonetheless.
If you want to know what Ajax returned then you can always insert a console.log(msg) in the right place (see the commented-out line below).
And - just to be clear - if your loaded content is to be generated by a PHP script, then the url in your loadPage function should of course point to a PHP script on the relevant server. This script will look for the data and process it into your desired html format before sending it back as the response to the Ajax request.
function loadPage(url){
url=url.replace('#page',''); //strip the #page part of the hash and leave only the page number
jQuery('#IAmloading').show(); //show the rotating gif animation
jQuery.ajax({ //create an ajax request to load_page.php
type: "GET",
url: url, // the URL of the page to be loaded ...
data: {action: 'ajax_request2', id: 4}, //your further parameters ...
dataType: "json", //expect json to be returned
error: function(xhr, textStatus, textError) { console.log(textError);},
success: function(msg){ console.log("Working loadPage ajax!");
// console.log(msg); // show what the AJAX request returned
if(msg) //if no errors
{
jQuery('#pageContent').html(JSON.stringify(msg)); //put msg into pageContent
jQuery('#IAmloading').hide(); //and hide the rotating gif
}
}
});
}
// call the function with the URL of a test site (returns JSON only ...):
loadPage('https://jsonplaceholder.typicode.com/users');
#IAmloading {visibility: hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="IAmloading">Please wait, page is loading ...</div>
<div id="pageContent"></div>