Cannot pass JS variable to PHP using AJAX

Question

I am trying to get current location of user.

I have JS script to get current Latitude and Longitude with AJAX to send js variables to index.php.

$(document).ready(function() {
if ("geolocation" in navigator){
    navigator.geolocation.getCurrentPosition(function(position){
            var userLat = position.coords.latitude;
            var userLong = position.coords.longitude;
            console.log(userLong);
            console.log(userLat);

            $.ajax({
              type: 'POST',
              url: 'index.php',
              data: {
              userLat : userLat,
              userLong : userLong
              },
              success: function(data)
                {
                  console.log(data);

                }

            });

    });
}else{
    console.log("Browser doesn't support geolocation!");
}});

Then I am trying to do this in my index.php:

echo $_POST['userLat'];
echo $_POST['userLong'];

Nothing shows up. Thanks in advance.

In your browser's debugging tools, are there any errors on the console? What network requests are made and what data is included in those requests? When you debug, is the AJAX call made at all? What exactly is the server's response? — David, Oct 01 '17 at 20:28
It shows correct output for: console.log(userLong); console.log(userLat); No other errors. Also for console,log(data) it shows entire page code, I am not sure why. — Valentin M, Oct 01 '17 at 20:31
Well, it's showing whatever is returned by that AJAX request. If `index.php` returns the entire page, then it'll show the entire page. Where exactly are you looking for the AJAX values? Aren't you checking the console log response? — David, Oct 01 '17 at 20:35
Yep, I am checking console output for index.php. like I said, it shows correct values in console output for userLong and userLat but when console.log(data) is called it shows entire page's code instead of data that was sent with AJAX. I am not sure why this is happening. — Valentin M, Oct 01 '17 at 20:39
`"it shows correct values in console output"` - Then what exactly is the problem? You're logging to the console, and nothing else. And the correct data is in the console. So what's wrong? What were you expecting to happen? It shows the entire page because that's what's in the response when you request the page. Is there any reason why it shouldn't be doing this? — David, Oct 01 '17 at 20:41
I tested this code and it seemed to work exactly as expected. What were you expecting differently? — Darren H, Oct 01 '17 at 20:49
The idea is to transfer variable userLat and userLong to php variables, this doesnt happen. — Valentin M, Oct 01 '17 at 20:52
@ValentinM: How have you verified that this doesn't happen? There are no "PHP variables" used anywhere in the question. The code you show works. The behavior you describe is *exactly* what we would expect it to do. You haven't described or demonstrated any actual problem. — David, Oct 01 '17 at 20:53
Basically when I try to echo $_POST['userLat']; it doesn't shw anything. That's the problem. — Valentin M, Oct 01 '17 at 20:54
@ValentinM: Earlier you stated that the entire HTML code is logged to the console. When you look in that HTML code, do you see that echo-ed output? Not on the current page, but in what's logged to the console. — David, Oct 01 '17 at 20:55

DFriend · Answer 1 · 2017-10-01T22:02:57.647

1

It might help to define and return a dataType for the ajax.

add this to your list of ajax options

 dataType: 'json',

Then in index.php encode and echo a json string. Remove the lines

echo $_POST['userLat'];
echo $_POST['userLong'];

replace them with

echo json_encode($_POST);

The console.log(data); in the success function should show an object with two items: 'userlat' and 'userLong' and associated values for each. Or it should if $_POST had those two items.

If you want the browser screen to update you will have to take data and use it to modify the DOM.

edited Oct 01 '17 at 22:02

answered Oct 01 '17 at 20:42

DFriend

8,869
1
13
26

now my AJAX code looks like this: $.ajax({ type: 'POST', url: 'index.php', dataType: 'json', data: { userLat : userLat, userLong : userLong }, success: function(data) { console.log(data); } }); and in index.php I have echo json_decode('$_POST'); Still doesnt "echo" anything and console log for console.log(data); is empty now. – Valentin M Oct 01 '17 at 20:49
Should be `json_encode`, not `json_decode`. Also,remove the single quotes around `$_POST`. Use this `echo json_encode($_POST);` – DFriend Oct 01 '17 at 22:04
The `echo` from a function handling an ajax request will not be sent to the browser output. It is sent to the `success` function of your ajax statement. – DFriend Oct 01 '17 at 22:07

Mohammed Elhag · Accepted Answer · 2018-04-08T22:47:42.607

Nothing shows up.

And that's correct you will never get any thing by browsing index.php because there is no POST at this time , AJAX is internal and the only way to show a result from index.php is in the page that you send from it an ajax call.

At this :

success: function(data)
            {
              console.log(data);

            }

you could control where to show your data that comes from index.php by , for example alert(data) or document.getElementById("someelement").innerHTML=data; and so on.

Cannot pass JS variable to PHP using AJAX

2 Answers2