Pass variable from Javascript to PHP using AJAX

Question

I'm trying to pass in variables from a Javascript file to a PHP file. From my js file:

dataQuery = {
    range: [[range.lower, range.upper]],
    detail: { id: detail.id }
  };

 $.ajax({
    type: "POST",
    async: true,
    url: scope.fetchUrl,
    data: { query: dataQuery }
    })
    .done(function( data ) {
        alert("success!");
    }

In my php file I have session variables because I need to do oauth authentication.

if (isset($_SESSION['accessToken'])) 
{
    $companyId = "1234";
    $rollupFreq = "1H";
    $oauth->setToken(
        $_SESSION['accessToken'],
        $_SESSION['accessTokenSecret']);
    $apiUrl = ($apiBaseUrl
                . '&company_id=' . urlencode($companyId) 
                . '&rollup_frequency=' . urlencode($rollupFreq) 
                . '&start_datetime_utc=' . urlencode($range['lower'])
                . '&end_datetime_utc=' . urlencode($range['upper'])
                );
    try
    {
        header('Content-Type: application/json');       

        $data = $oauth->fetch($apiUrl);
        $responseInfo = $oauth->getLastResponse();
        print_r($responseInfo);
        if (isset($_GET['query']))
        {
            $range = $_GET['query'];
            print_r($range);
            }
    }
}

Nothing appears when I try to print $range, and when I try to use values from $range in the url I get "Undefined variable: range in url"

Any help would be appreciated!

Have you watched the request / response in the browser's console? — Jay Blanchard
– Jay Blanchard, Commented Feb 23, 2015 at 15:47

Elias Van Ootegem · Accepted Answer · 2015-02-23 15:58:28Z

3

You're creating an AJAX request using POST:

 $.ajax({
     type: "POST",
     //...
 });

Yet in your PHP code, you use the $_GET variable:

$range = $_GET['query'];

Change $_GET to $_POST.

You're also using the $range variable (in urlencode($range['upper']) for example), but there's no code anywhere that actually declares, let alone initializes it. That's the cause of the "Undefined variable" notices you're seeing

Lastly, the data you're sending to PHP will look something like this:

$_POST['query']['range'] = array(
    array(range.lower, range.upper)//whatever these values may be
);

So to get at the range.lower value, you'd have to write:

$_POST['query']['range'][0][0];
//for the upper:
$_POST['query']['range'][0][1];

That's just messy. see the docs: jQuery will correctly format your data for you, regardless of what you pass to $.ajax. I'd suggest the following:

dataQuery = {
    range: {lower: range.lower, upper: range.upper},
    detail: { id: detail.id }
};

 $.ajax({
    type: "POST",
    //async: true, <== you can leave this out
    url: scope.fetchUrl,
    data: dataQuery
}).done(function( data ) {
    alert("success!");
});

Then, in PHP, you can get at the values a bit more intuitively:

$upper = $_POST['range']['upper'];
//to get a range array:
$rage = range(
    (int) $_POST['range']['lower'],//these values are strings so cast
    (int) $_POST['range']['upper'] //to ints to get a numeric range
);
$detailId = $_POST['detail']['id'];

edited Feb 23, 2015 at 15:58

answered Feb 23, 2015 at 15:50

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

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

6 Comments

user2100620 Over a year ago

You're right about the POST/GET, thank you. But I'm confused about using $range, how do I access the lower & upper values that were passed in from js?

Elias Van Ootegem Over a year ago

@user2100620: Updates my answer, ATM, that's $_POST['query']['range'][0][0] and $_POST['query']['range'][0][1], because dataQuery.range is declared as a 2D array ([[ <== 2 [ means 2 arrays).

user2100620 Over a year ago

I've done exactly as you've said and I'm still getting "Undefined variable: lower/upper in url" when I try to use the values from $lower & $upper in the api call

Elias Van Ootegem Over a year ago

@user2100620: With the code I've posted here, there won't be a $lower or $upper anywhere. Set up a pastebin or a gist or something so I can actually see what you're doing. The JS and the PHP code both, because if you do what I've posted here, things should work

user2100620 Over a year ago

pastebin.com/NXPWU0w8 There are obviously things missing from the Javascript section, because there are many other things going on

|

Collectives™ on Stack Overflow

Pass variable from Javascript to PHP using AJAX

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related