Load PHP File Using Ajax (Without JQUery)

Question

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.

CHeck your console, method: GET should be method: "GET", — ariel
– ariel, Commented Apr 29, 2020 at 19:24
P.S. from a glance at the code, I'd suspect method: GET might be a problem - it could be causing a syntax error, or at least GET is probably undefined. It's supposed to be a string. Change it to method: "GET", - you also forgot the comma at the end before the next option - that definitely will cause a syntax error. This is a basic, basic error which you would have caught immediately if you'd looked at your Console. You can't learn to program unless you also learn how to debug your programs at the same time. Take the time to work that out, and you'll save hours of frustration later. — ADyson
– ADyson, Commented Apr 29, 2020 at 19:30
For Javascript, it's the browser which does the debugging, not the code editor (although the editor could highlight syntax errors for you before you try and run the code) — ADyson
– ADyson, Commented Apr 29, 2020 at 19:59
"the same result happens"...and what result is that, specifically? Again, open the Developer Tools, and then load your page, to get clues about what problems happen. You want to be looking for console errors, and then look in the Network tool to see if the request to nba2019_namelist.php actually happens, does it appear in the list of requests? If the request does happen, then do you get a "200" (OK) response code? And when you click on the AJAX request to nba2019_namelist.php from the Network tool, and go to the Response tab within it, what do you see there? Is it what you expected? — ADyson
– ADyson, Commented Apr 29, 2020 at 20:00
P.S. for clarity, the Developer Tools I am referring to are located within your browser. Press F12 in most browsers to open them. Personally I think the Chrome ones are the best / easiest to use (and I'd avoid Internet Explorer's), but all of them are fine for this task, and look and feel similar enough that my description of what to do should broadly fit them all. — ADyson
– ADyson, Commented Apr 29, 2020 at 20:05

lowlyprogrammer · Accepted Answer · 2020-05-01 21:08:24Z

2

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.

answered May 1, 2020 at 21:08

lowlyprogrammer

4994 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ADyson Over a year ago

yes that's the standard way to include an external Javascript library into your page. You always need to do that before you can use a library such as jQuery. Glad you fixed it.

lowlyprogrammer Over a year ago

Thank you for your help! Learned a lot about dev tools which will be very helpful moving forward.

Hardood · Accepted Answer · 2020-04-29 19:34:02Z

1

Try this by using fetch:

fetch('nba2019_namelist.php')
.then(response=>response.Text())
.then(data => { 
     document.getElementById("playerNames").innerHTML = data;
 });

I hope it helps

answered Apr 29, 2020 at 19:34

Hardood

5331 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Load PHP File Using Ajax (Without JQUery)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related