选择Box以使用JS更改API URL的PHP​​值

Question

How can I use AJAX to update an API URL from a value in a select box?

This is where I am at. User selects a date period from a select box to change analytic dates

<select name="DateSelector" id="DateSelector" onchange="return datePeriod();">
  <option selected value="30">Last 30 Days</option>
  <option value="90">Last 90 Days</option>
  <option value="365">Last 365 Days</option>
</select>

and using JS, I get the value from onchange

function datePeriod() {
  var x = document.getElementById("DateSelector").value;
  document.getElementById("DateShow").innerHTML = x;
}

And want to use this value in PHP to change the value of the date=last of the API.

$DatePeriod = '$_GET["DateShow"]';
$url = "https://example.com";
$url .= "?module=API&method=API.get&format=php";
$url .= "&idSite=2&period=day&date=last$DatePeriod";

With these snippets, I seem to be falling short. Could someone point me in the right direction? Just to reiterate, I want a user to be able to select a date range (default of 30 days as value) and update the API URL.

Please also keep in mind that I am needing to update the values of the analytics from the new API URL as a user changes the select value.

UPDATE: Considering that the above code is changing the value of the API URL, then how can I ensure that upon a user selecting a value these elements are updated?

$nb_visits           = 0;
$nb_uniq_visitors   = 0;
$nb_pageviews       = 0;
$nb_uniq_pageviews  = 0;
$nb_actions         = 0;
$nb_outlinks        = 0;
$bounce_count       = 0;
$avg_time_on_site   = 0;

So that <?php echo $data['nb_visits']; ?> for example (in page template, not function) is updated as a user changes the select value?

FULL PHP FUNCTION

$DatePeriod = '$_GET["DateShow"]';
$token_auth = 'API_TOKEN';
$url = "https://example.com/";
$url .= "?module=API&method=API.get&format=php";
$url .= "&idSite=2&period=day&date=last$DatePeriod";
$url .= "&token_auth=$token_auth";

$fetched = file_get_contents($url);
$content = unserialize($fetched);

// case error
if (!$content) {
    print("NO DATA");
}
$nb_visits          = 0;
$nb_uniq_visitors   = 0;
$nb_pageviews       = 0;
$nb_uniq_pageviews  = 0;
$nb_actions         = 0;
$nb_outlinks        = 0;
$bounce_count       = 0;
$avg_time_on_site   = 0;

foreach ($content as $row) {
    $nb_visits          += $row['nb_visits'];
    $nb_uniq_visitors   += $row['nb_uniq_visitors'];
    $nb_pageviews       += $row['nb_pageviews'];
    $nb_uniq_pageviews  += $row['nb_uniq_pageviews'];
    $nb_actions         += $row['nb_actions'];
    $nb_outlinks        += $row['nb_outlinks'];
    $bounce_count       += $row['bounce_count'];
    $avg_time_on_site   += $row['avg_time_on_site'];
}

$data = [
    'nb_visits'         => $nb_visits,
    'nb_uniq_visitors'  => $nb_uniq_visitors,
    'nb_pageviews'      => $nb_pageviews,
    'nb_uniq_pageviews' => $nb_uniq_pageviews,
    'nb_actions'        => $nb_actions,
    'nb_outlinks'       => $nb_outlinks,
    'bounce_count'      => $bounce_count,
    'avg_time_on_site'  => $avg_time_on_site,
];  

Answer 1

Since you tagged this as jquery I am assuming you already have that in your HTML.

If you look at the Piwik URL, you can see that one get parameter changes the output format (...&format=php&i...), with this you can easily eliminate all PHP for this by changing it to (...&format=json&i...)

In your JS datePeriod() function you can get the desired data if you call the API using AJAX:

function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://domain/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68...`, data => {
    let visits;
    for(i in data) { 
      let a = data[i].nb_visits; 
      if(a) { // this makes sure that we don't add undefined to our number
        visits+=a
      }
    }
    $("#whereYouWantToDisplayYourHits").html(visits);
  }

}

You can of course expand this to show all kinds of stuff, like for example your unique pageviews:

function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://domain/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68...`, data => {
    let visits;
    let uniquePageviews;
    for(i in data) { 
      let a = data[i].nb_visits; 
      if(a) { // this makes sure that we don't add undefined to our number
        visits+=a;
      }
      let b = data[i].nb_uniq_pageviews;
      if (b) {uniquePageviews+=b;}
    }
    $("#whereYouWantToDisplayYourHits").html(visits);
    $("#whereYouWantToDisplayYourUNi...").html(uniquePageviews);
    // and so on
  }

}