make an action with ajax when i click on anchor - ajax

Question

i try to found a code enable to do something like this :
my link look like this :
<li>Jouer</li>
the destination of this link is . This article is only available on the page when i click on my link, he will be available by a css :
#main {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
max-width: 100%;
z-index: 3;
}
#main article {
-moz-transform: translateY(0.25rem);
-webkit-transform: translateY(0.25rem);
-ms-transform: translateY(0.25rem);
transform: translateY(0.25rem);
-moz-transition: opacity 2.325s ease-in-out, -moz-transform 0.325s ease-in-out;
-webkit-transition: opacity 2.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
-ms-transition: opacity 2.325s ease-in-out, -ms-transform 0.325s ease-in-out;
transition: opacity 2.325s ease-in-out, transform 0.325s ease-in-out;
padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
position: relative;
width: 90rem;
max-width: 100%;
background-color: rgba(27, 31, 34, 0.85);
border-radius: 4px;
opacity: 0;
}
#main article.active {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
so, i try to load the content of only when he is visible on the screen. with an ajax or i don't know actually xD
my next code inside this will be something like this :
<script>
$(document).ready(function(){
$.ajax({
url: "http://localhost/api/pages/newgame",
method: "GET",
data: "token=3660935154fe3d7e9612466f6e70fbe6",
dataType: 'json',
success: function(json) {
console.log(json);
$("#response").append("<p><b>Page title: " + json.data.content+"</p>");
},
error: function(data) {
console.log("Error");
}
});
});
</script>
thx for your help.

Answer 1

HTML
<li>Jouer</li>
JS
function yourAJAXFunction(){
$.ajax({
url: "http://localhost/api/pages/newgame",
method: "GET",
data: "token=3660935154fe3d7e9612466f6e70fbe6",
dataType: 'json',
success: function(json) {
console.log(json);
$("#response").append("<p><b>Page title: " + json.data.content+"</p>");
},
error: function(data) {
console.log("Error");
}
});
}