Question

如何使用AJAX从选择框中的值更新API URL？

这就是我所处的位置。用户从选择框中选择日期时段以更改分析日期

<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>

并使用JS，我从onchange

获取值

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

并希望在PHP中使用此值来更改API的date=last值。

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

有了这些片段，我似乎不尽如人意。有人能指出我正确的方向吗？重申一下，我希望用户能够选择日期范围（默认30天为value）并更新API网址。

另请注意，当用户更改选择值时，我需要从新API网址更新分析值。

更新考虑到上面的代码正在改变API URL的值，那么如何确保在用户选择值时更新这些元素？

$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;

例如，当用户更改选择值时，<?php echo $data['nb_visits']; ?>（在页面模板中，不是函数）会更新吗？

完整的PHP功能

$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

由于您将此标记为jquery，我假设您已经在HTML中将其标记为。

如果查看Piwik URL，您可以看到一个get参数更改了输出格式（...&format=php&i...），通过此参数，您可以通过将其更改为（...&format=json&i...来轻松删除所有PHP ）

在JS datePeriod()函数中，如果使用AJAX调用API，则可以获得所需的数据：

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);
  }

}

您当然可以将其展开以显示各种内容，例如您的独特综合浏览量：

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
  }

}

选择Box以使用JS

1 个答案: