當用戶從日期選擇器中選擇時，使用AJAX更新API URL

Question

應用日期選擇器按鈕時，如何使用AJAX更新dateDates變量？ apply.daterangepicker是單擊“應用”按鈕時觸發的

請參閱下面的代碼段，但實際上，我正在使用http://www.daterangepicker.com （依賴Bootstrap，jQuery和Moment.js的Date Range Picker）來允許用戶更新日期段，輸出...

let dateDates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');

並且dateDates作為...傳遞給API

$.getJSON(`https://examples.com/?module=API&method=API.get&date=${dateDates}&format=json`, (data) => {

請注意API的 date=內的${dateDates} ，因為當應用日期選擇器按鈕時，我希望這些值更新並使用新的URL重新加載JSON數據。

查看此代碼段中的完整代碼。 干杯。

 $(function() { var start = moment().subtract(29, 'days'); var end = moment(); function cb(start, end) { $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); } $('#reportrange').daterangepicker({ startDate: start, endDate: end, ranges: { 'Today': [moment(), moment()], 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] } }, cb); cb(start, end); let dateDates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD'); $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`, (data) => { let visitors = 0; let uniq_visitors = 0; let pageviews = 0; let uniq_pageviews = 0; let actions = 0; let outlinks = 0; let bounces = 0; let avgtime = 0; let dayCount = 0; for (i in data) { if (data[i].nb_visits) { visitors += data[i].nb_visits; } } $("#visitors").html(visitors); }); }); 

 <!-- Include Required Prerequisites --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> <!-- Include Date Range Picker --> <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; <span></span> <b class="caret"></b> </div> <div id="visitors"></div> 

Answer 1

我沒有收到您的問題，但是據我了解，您需要將代碼放置在回調中以將json作為daterangepicker函數的第二個參數。

 var start = moment().subtract(29, 'days');
 var end = moment();
 let dateDates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD'); 
 let defaultUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`; 
 updateValueForUrl(defaultUrl);
 $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, function(start, end) {

    let dates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');
    let url = `https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=${dates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
    updateValueForUrl(url);
  });

  function updateValueForUrl(url) {
    $.getJSON(url, (data) => {
        let visitors = 0;
        let uniq_visitors = 0;
        let pageviews = 0;
        let uniq_pageviews = 0;
        let actions = 0;
        let outlinks = 0;
        let bounces = 0;
        let avgtime = 0;
        let dayCount = 0;

        for (i in data) {
          if (data[i].nb_visits) {
            visitors += data[i].nb_visits;
          }
        }
        $("#visitors").html(visitors);
    });
  }