jQuery $.get returns PHP code as text instead of a value

Question

This is my JavaScript code:

$(FORM).on('submit', function (event) {
    event.preventDefault();
    $.get('server/example.php?number1=34&number2=46', function (response) {
        console.log(response);
    });
});

And this is my PHP file called example.php located in a directory called server:

<?php
  $num1 = $_GET['number1'];
  $num2 = $_GET['number2'];
  $sum = $num1 + $num2;
  echo($sum);
?>

When I make my get request, the response in Chrome DevTools (and console) prints the PHP code as the response instead of the value 80 (the sum of adding 34 and 46) when the console.log(response) is called. I've tried the $.ajax() method as well as explicitly instantiating and using the XMLHttpRequest object. They all return/print the PHP code instead of 80. How do I get the value of $sum?

I use BrowserSync when developing if that makes a difference (if it does, how can I do it differently).

How does `browsersync` work? Are you running a web server with PHP installed? — user3783243, Aug 02 '18 at 15:02
Sounds like either the PHP interpreter is not being fired by your web server or you are using the filesystem in your browser instead of localhost. — MonkeyZeus, Aug 02 '18 at 15:03
sounds like PHP is not installed or activated properly on your webserver, and/or you're running over `file://` instead of `http://`. BTW What happens if you visit the same URL directly in your browser's address bar? And what is the relevance of browsersync? — ADyson, Aug 02 '18 at 15:03
What does the URL look like where you are loading this JS? Is it like `file:///C:/path/to/my/page.html`? — MonkeyZeus, Aug 02 '18 at 15:03
@MonkeyZeus When I serve my files through browser sync, the URL is http://localhost:3000/ — Oskarzito, Aug 02 '18 at 15:05
Sounds like you don't have a server set up properly, and PHP is being treated as a static file. — Julian Camilleri, Aug 02 '18 at 15:05
@MonkeyZeus When I run http://localhost:3000/server/example.php in the address bar, the example.php file is downloaded :/ hmm — Oskarzito, Aug 02 '18 at 15:08
If you are not sure how to set up a local web server then have a look at [WAMP Server](http://www.wampserver.com/en/). There is also XAMMP, MAMP, LAMP depending on your operating system. — MonkeyZeus, Aug 02 '18 at 15:28
Check out https://stackoverflow.com/q/5121495/2191572 for some detailed info — MonkeyZeus, Aug 02 '18 at 15:29

score 1 · Accepted Answer · answered Aug 02 '18 at 17:49

1

According to https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development

"BrowserSync creates a small server"

...so I guess it can only serve static HTML pages, not PHP. You need to set up a proper webserver like Apache and install PHP into it. As mentioned in the comments, it can all be downloaded and installed separately, or there are packages such as LAMP, XAMPP and others which will give you a whole Apache, PHP and MySQL development stack installed easily.

The page also says

if you already have a server setup, BrowserSync can hook into that server and act as a proxy.

which means that once you've got your proper server set up, you can still take advantage of BrowserSync's features at the same time, by connecting it to your server

answered Aug 02 '18 at 17:49

ADyson

57,178
14
51
63

Aah, thanks! Now, my focus isn't really to learn PHP and such, but only client-side stuff (currently attending a university course). Do you have any tips for testing out Ajax calls without the need for a web server? Like for example trying my code above? – Oskarzito Aug 03 '18 at 09:37
There are a few sites around which allow you to mock an endpoint and just return the same static data every time. So it's a bit less flexible if you're trying to test the effect of sending different parameters and values, but it does at least let you do some basic testing. http://myjson.com/ is just one such site, for example. You can paste in some JSON and save it, and it'll give you a URL which you can use in your AJAX call, which will always return that data. – ADyson Aug 03 '18 at 09:57

jQuery $.get returns PHP code as text instead of a value

1 Answers1