jQuery中用于获取JSON数据的select的默认值

Question

jQuery中用于获取JSON数据的select的默认值

3

需要帮助下面的代码片段。当用户从 select 中选择一个选项时，API URL 会更新为用户想要的适当天数。但是，我已经设置了一个默认值，即在 select option 中使用 selected，并通过 jQuery 使用 $('#DateSelector').val('30')。

每个都按照其意图执行，除了JSON数据未在页面加载时加载。

如何使该value在页面加载时传递，以便默认的API URL提供正确的数据。

$('#DateSelector').val('30')

function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68aa5bd12137f13255dcb98794b65dff`, (data) => {

    //console.log(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;

    for (i in data) {

      if (data[i].nb_visits) {
        visitors += data[i].nb_visits;
      }
      if (data[i].nb_uniq_visitors) {
        uniq_visitors += data[i].nb_uniq_visitors;
      }
      if (data[i].nb_pageviews) {
        pageviews += data[i].nb_pageviews;
      }
      if (data[i].nb_uniq_pageviews) {
        uniq_pageviews += data[i].nb_uniq_pageviews;
      }
      if (data[i].nb_actions) {
        actions += data[i].nb_actions;
      }
      if (data[i].nb_outlinks) {
        outlinks += data[i].nb_outlinks;
      }
      if (data[i].bounce_count) {
        bounces += data[i].bounce_count;
      }
      if (data[i].avg_time_on_site) {
        avgtime += data[i].avg_time_on_site;
      }
    }

    $("#visitors").html(visitors);
    $("#uniq_visitors").html(uniq_visitors);
    $("#pageviews").html(pageviews);
    $("#uniq_pageviews").html(uniq_pageviews);
    $("#actions").html(actions);
    $("#outlinks").html(outlinks);
    $("#bounces").html(bounces);
    $("#avgtime").html(avgtime / datePeriod);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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


<span id="visitors"></span>
<span id="uniq_visitors"></span>
<span id="pageviews"></span>
<span id="uniq_pageviews"></span>
<span id="actions"></span>
<span id="outlinks"></span>
<span id="bounces"></span>
<span id="avgtime"></span>

我已经浏览了许多与默认选择值相关的问题，但没有一个适合我想要实现的目标。

更新

在应用下面的答案，使用$('#DateSelector').val('30').trigger("change")后，这是一个屏幕录制的结果。

使用其他答案

$('#DateSelector').val('30')
datePeriod();

在页面加载时，我得到每个 object 的值为 0。

- Darren

3个回答

2

这样应该可以了。我已经在你的代码中添加了 trigger("change")。

$('#DateSelector').val('30').trigger("change")

$('#DateSelector').val('30').trigger("change")

function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68aa5bd12137f13255dcb98794b65dff`, (data) => {

    //console.log(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;

    for (i in data) {

      if (data[i].nb_visits) {
        visitors += data[i].nb_visits;
      }
      if (data[i].nb_uniq_visitors) {
        uniq_visitors += data[i].nb_uniq_visitors;
      }
      if (data[i].nb_pageviews) {
        pageviews += data[i].nb_pageviews;
      }
      if (data[i].nb_uniq_pageviews) {
        uniq_pageviews += data[i].nb_uniq_pageviews;
      }
      if (data[i].nb_actions) {
        actions += data[i].nb_actions;
      }
      if (data[i].nb_outlinks) {
        outlinks += data[i].nb_outlinks;
      }
      if (data[i].bounce_count) {
        bounces += data[i].bounce_count;
      }
      if (data[i].avg_time_on_site) {
        avgtime += data[i].avg_time_on_site;
      }
    }

    $("#visitors").html(visitors);
    $("#uniq_visitors").html(uniq_visitors);
    $("#pageviews").html(pageviews);
    $("#uniq_pageviews").html(uniq_pageviews);
    $("#actions").html(actions);
    $("#outlinks").html(outlinks);
    $("#bounces").html(bounces);
    $("#avgtime").html(avgtime / datePeriod);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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


<span id="visitors"></span>
<span id="uniq_visitors"></span>
<span id="pageviews"></span>
<span id="uniq_pageviews"></span>
<span id="actions"></span>
<span id="outlinks"></span>
<span id="bounces"></span>
<span id="avgtime"></span>

- Kushal

谢谢你的回答。现在只是想让这个正常工作。使用你的代码片段，我在页面加载时没有收到值。只是想查找是否有任何冲突。 - Darren

由于您正在进行 API 调用以获取数据并完成显示任务，因此在页面加载时无法获得值。如果有依赖于 API，则可能需要在执行相同操作时显示加载器。 - Kushal

我已经使用你的答案在问题中添加了一个屏幕录制。从我所看到的情况来看，除非页面上的其他数据妨碍了它，否则没有冲突，但我怀疑这一点。你有什么建议可以强制执行 $('#DateSelector').val('30').trigger("change") 吗？所有脚本都在 select 上面加载。 - Darren

1

只是想让你知道，你的答案绝对正确——我的页面上有很多API，这就是我的问题所在。我通过 setTimeout(function () { $('#DateSelector').val('30').trigger("change")}, 1000); 解决了这个问题。再次感谢你的帮助。 - Darren

@Darren 酷。很高兴见到你。 - Kushal

0

在使用Jquery设置默认值时，

$('#DateSelector').val('30').trigger('change');

可能会解决您的问题。

- Sagar Nepali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cdoshi · Accepted Answer

您正在调用datePeriod onChange。相反，应在页面加载时仅调用一次datePeriod，然后按您目前的方式触发datePeriod。我所做的是手动触发一次datePeriod。请查看下面的代码片段，保留HTML标签：

$('#DateSelector').val('30')
datePeriod();
function datePeriod() {
  let datePeriod = $("#DateSelector").val();
  $("#DateShow").html(datePeriod);
  $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68aa5bd12137f13255dcb98794b65dff`, (data) => {

    //console.log(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;

    for (i in data) {

      if (data[i].nb_visits) {
        visitors += data[i].nb_visits;
      }
      if (data[i].nb_uniq_visitors) {
        uniq_visitors += data[i].nb_uniq_visitors;
      }
      if (data[i].nb_pageviews) {
        pageviews += data[i].nb_pageviews;
      }
      if (data[i].nb_uniq_pageviews) {
        uniq_pageviews += data[i].nb_uniq_pageviews;
      }
      if (data[i].nb_actions) {
        actions += data[i].nb_actions;
      }
      if (data[i].nb_outlinks) {
        outlinks += data[i].nb_outlinks;
      }
      if (data[i].bounce_count) {
        bounces += data[i].bounce_count;
      }
      if (data[i].avg_time_on_site) {
        avgtime += data[i].avg_time_on_site;
      }
    }

    $("#visitors").html(visitors);
    $("#uniq_visitors").html(uniq_visitors);
    $("#pageviews").html(pageviews);
    $("#uniq_pageviews").html(uniq_pageviews);
    $("#actions").html(actions);
    $("#outlinks").html(outlinks);
    $("#bounces").html(bounces);
    $("#avgtime").html(avgtime / datePeriod);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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


<span id="visitors"></span>
<span id="uniq_visitors"></span>
<span id="pageviews"></span>
<span id="uniq_pageviews"></span>
<span id="actions"></span>
<span id="outlinks"></span>
<span id="bounces"></span>
<span id="avgtime"></span>