I have the following Ajax code in an html file:
<script type="text/javascript" src="jquery-3.5.0.min.js">
$.ajax({
method: "GET",
url:"nba2019_namelist.php",
success:function(res) {
$("#playerNames").html(res)
}
})
</script>
This is supposed to load a php file (which really just creates a list from a csv), but is not working. I am using Apache to make php function, and when I go to http:/localhost/nba2019_namelist.php, my list is present, so I am fairly certain that the php file isn't the issue. The ajax code is meant to replace the following html list:
<div>
<ul id="playerNames">
<li><b>Harden</b></li>
<li><b>Giannis</b></li>
<li><b>Lebron</b></li>
<li><b>Booker</b></li>
<li><b>Lavine</b></li>
<li><b>Westbrook</b></li>
<li><b>Jokic</b></li>
</ul>
</div>
But the only output when I load the page are the same names that are typed in here, not the ones created by my php file. What am I doing wrong here? Do I need to specify in the Apache httpd.conf which php file I want to load? I don't really know any Ajax, but based on what I have seen on forums, it should work. What am I doing wrong here, and what should I do next to fix this issue?
If JQuery is the only solution, just let me know, I would just rather not learn something new at the moment, unless it is completely necessary.
I was able to fix my own problem. I followed a tutorial online that suggested changing my vanilla <script> tag that contained my ajax code to instead read <script type="text/javascript" src="jquery.min.js">. This made my code not function properly.
To solve this, I changed my script tag back to the vanilla <script>, and instead put the following at the bottom of my <head>: <script type="text/javascript" src="jquery.min.js"></script>
This allowed my php code to be grabbed from ajax as expected.
Try this by using fetch:
fetch('nba2019_namelist.php')
.then(response=>response.Text())
.then(data => {
document.getElementById("playerNames").innerHTML = data;
});
I hope it helps