jQuery API 调用未返回预期数据

Question

我正在尝试通过 javascript/api 将 Covid-19 病例添加到我的网站，但出现问题。按国家/地区查询工作正常，但查询“总计”不会返回任何结果。所以我想统计来自世界各地以及第二排来自一个国家的“感染者”总数。如果有人知道代码中需要更改哪些内容，请告诉我。$(document).on('change','.corona-select', function() {  var city = $(this).val();  if (city == 'Kosovo') {    $('#c_confirmed').html();    $('#c_recovered').html();    $('#c_deaths').html();  }  else if(city == 'total') {    $('#c_confirmed').html();    $('#c_recovered').html();    $('#c_deaths').html();  }  else {    $.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {      $('#c_confirmed').html(data.confirmed.value);      $('#c_recovered').html(data.recovered.value);      $('#c_deaths').html(data.deaths.value);    });  }});

Answer 1

查看 API，您的<select>选项中有一个拼写错误：Kosova不会工作，但Kosovo会：

• https://covid19.mathdro.id/api/countries/Kosova

• https://covid19.mathdro.id/api/countries/Kosovo

其次，您需要查询不同的端点来获取total数据。

• 总数据：https://covid19.mathdro.id/api/

• 国家数据：https://covid19.mathdro.id/api/countries/${country}

最后，如果您想立即显示总值，而不必选择国家/地区，然后再次选择“总计”，则需要能够从处理程序中抽象出一些逻辑.on()。

这是对逻辑的重写，删除了一些重复，立即查询“总计”，并将“城市”更正为“国家”。

// this function doesn't need to know about the <select> element

// all it needs is a string value

function showValuesForCountry(country) {

  var endpoint = 'https://covid19.mathdro.id/api/';

  // swap in the country-specific URL if we're not trying to get total data

  if (country != 'total') {

    endpoint = `https://covid19.mathdro.id/api/countries/${country}`;

  }

  // no need to duplicate the API call or value-setting code

  // since we're using the dynamic endpoint value determined above

  $.get(endpoint, function(data) {

    $('#c_confirmed').html(data.confirmed.value);

    $('#c_recovered').html(data.recovered.value);

    $('#c_deaths').html(data.deaths.value);

  });

}

// when the select changes, get new data

$(document).on('change','.corona-select', function() {

  // get a string value from the <select>

  var country = $(this).val();

  

  // pass that string value to our reusable function

  showValuesForCountry(country);

});

// call this function when the page loads

// since 'total' is our default value, get that data immediately

showValuesForCountry('total');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div class="selectBox">

    <select class="form-control corona-select" name="city">

      <option value="total">Total</option>

      <option value="Kosovo">Kosovo</option>

      <option value="Albania">Albania</option>

      <option value="Afghanistan">Afghanistan</option>

      <option value="Algeria">Algeria</option>

      <option value="Andorra">Andorra</option>

      <option value="Argentina">Argentina</option>

      <option value="Armenia">Armenia</option>

      <option value="Australia">Australia</option>

      <option value="Austria">Austria</option>

      <option value="Azerbaijan">Azerbaijan</option>

      <option value="Bahrain">Bahrain</option>

      <option value="Bangladesh">Bangladesh</option>

      <option value="Belarus">Belarus</option>

      <option value="Belgium">Belgium</option>

      <option value="Bhutan">Bhutan</option>

      <option value="Bolivia">Bolivia</option>

      <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>

      <option value="Brazil">Brazil</option>

      <option value="Brunei">Brunei</option>

      <option value="Bulgaria">Bulgaria</option>

      <option value="Burkina Faso">Burkina Faso</option>

      <option value="Cambodia">Cambodia</option>

      <option value="Cameroon">Cameroon</option>

      <option value="Canada">Canada</option>

      <option value="Chile">Chile</option>

      <option value="China">China</option>

      <option value="Colombia">Colombia</option>

      <option value="Congo (Kinshasa)">Congo (Kinshasa)</option>

      <option value="Costa Rica">Costa Rica</option>

      <option value="Cote d'Ivoire">Cote d'Ivoire</option>

      <option value="Croatia">Croatia</option>

      <option value="Cruise Ship">Cruise Ship</option>

      <option value="Cuba">Cuba</option>

      <option value="Cyprus">Cyprus</option>

      <option value="Czechia">Czechia</option>

      <option value="Denmark">Denmark</option>

      <option value="Dominican Republic">Dominican Republic</option>

      <option value="Ecuador">Ecuador</option>

      <option value="Egypt">Egypt</option>

      <option value="Estonia">Estonia</option>

      <option value="Finland">Finland</option>

      <option value="France">France</option>

      <option value="French Guiana">French Guiana</option>

      <option value="Georgia">Georgia</option>

      <option value="Germany">Germany</option>

      <option value="Greece">Greece</option>

      <option value="Guyana">Guyana</option>

      <option value="Holy See">Holy See</option>

      <option value="Honduras">Honduras</option>

      <option value="Hungary">Hungary</option>

      <option value="Iceland">Iceland</option>

      <option value="India">India</option>

      <option value="Indonesia">Indonesia</option>

      <option value="Iran">Iran</option>

      <option value="Iraq">Iraq</option>

      <option value="Ireland">Ireland</option>

      <option value="Israel">Israel</option>

      <option value="Italy">Italy</option>

      <option value="Jamaica">Jamaica</option>

      <option value="Japan">Japan</option>

      <option value="Jordan">Jordan</option>

      <option value="Korea, South">Korea, South</option>

      <option value="Kuwait">Kuwait</option>

      <option value="Latvia">Latvia</option>

      <option value="Lebanon">Lebanon</option>

      <option value="Liechtenstein">Liechtenstein</option>

      <option value="Lithuania">Lithuania</option>

      <option value="Luxembourg">Luxembourg</option>

      <option value="Malaysia">Malaysia</option>

      <option value="Maldives">Maldives</option>

      <option value="Malta">Malta</option>

      <option value="Martinique">Martinique</option>

      <option value="Mexico">Mexico</option>

      <option value="Moldova">Moldova</option>

      <option value="Monaco">Monaco</option>

      <option value="Mongolia">Mongolia</option>

      <option value="me">Montenegro</option>

      <option value="Morocco">Morocco</option>

      <option value="Nepal">Nepal</option>

      <option value="Netherlands">Netherlands</option>

      <option value="New Zealand">New Zealand</option>

      <option value="Nigeria">Nigeria</option>

      <option value="North Macedonia">North Macedonia</option>

      <option value="Norway">Norway</option>

      <option value="Oman">Oman</option>

      <option value="Pakistan">Pakistan</option>

      <option value="Panama">Panama</option>

      <option value="Paraguay">Paraguay</option>

      <option value="Peru">Peru</option>

      <option value="Philippines">Philippines</option>

      <option value="Poland">Poland</option>

      <option value="Portugal">Portugal</option>

      <option value="Qatar">Qatar</option>

      <option value="Reunion">Reunion</option>

      <option value="Romania">Romania</option>

      <option value="Russia">Russia</option>

      <option value="San Marino">San Marino</option>

      <option value="Saudi Arabia">Saudi Arabia</option>

      <option value="Senegal">Senegal</option>

      <option value="Serbia">Serbia</option>

      <option value="Singapore">Singapore</option>

      <option value="Slovakia">Slovakia</option>

      <option value="Slovenia">Slovenia</option>

      <option value="South Africa">South Africa</option>

      <option value="Spain">Spain</option>

      <option value="Sri Lanka">Sri Lanka</option>

      <option value="Sweden">Sweden</option>

      <option value="Switzerland">Switzerland</option>

      <option value="Taiwan*">Taiwan*</option>

      <option value="Thailand">Thailand</option>

      <option value="Togo">Togo</option>

      <option value="Tunisia">Tunisia</option>

      <option value="Turkey">Turkey</option>

      <option value="US">US</option>

      <option value="Ukraine">Ukraine</option>

      <option value="United Arab Emirates">United Arab Emirates</option>

      <option value="United Kingdom">United Kingdom</option>

      <option value="Vietnam">Vietnam</option>

    </select>

  </div>

</div>

<div class="col-lg-3 col-md-3 col-12">

  <div class="mapi-info">

    <p class="title-mapi">Confirmed</p>

    <span class="nr-mapi" id="c_confirmed"></span>

  </div>

  <div class="mapi red"></div>

</div>

<div class="col-lg-3 col-md-3 col-12">

  <div class="mapi-info">

    <p class="title-mapi">Recovered</p>

    <span class="nr-mapi" id="c_recovered"></span>

  </div>

  <div class="mapi green"></div>

</div>

<div class="col-lg-3 col-md-3 col-12">

  <div class="mapi-info">

    <p class="title-mapi">Deaths</p>

    <span class="nr-mapi" id="c_deaths"></span>

  </div>

  <div class="mapi gray"></div>

</div>

Answer 2

 function getCityConfirmed(city){

  $.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {

      $('#c_confirmed').html(data.confirmed.value);

  })

}

    $(document).on('change','.corona-select', function() {

  var city = $(this).val();

  console.log(city);

  if (city == 'Kosovo') {

    console.log('yes');

    $('#c_confirmed').html(getCityConfirmed("Kosovo"));

    $('#c_recovered').html();

    $('#c_deaths').html();

  }

  else if(city == 'total') {

    $('#c_confirmed').html();

    $('#c_recovered').html();

    $('#c_deaths').html();

  }

  else {

    $.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {

      $('#c_confirmed').html(data.confirmed.value);

      $('#c_recovered').html(data.recovered.value);

      $('#c_deaths').html(data.deaths.value);

    });

  }

});

Answer 3

您可以通过在 html 文件的头部添加 jquery 脚本来解决此问题，如下例所示

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

</head>

<body>

    <div class="selectBox">

        <select class="form-control corona-select" name="city">

            <option value="total">Total</option>

            <option value="Kosova">Kosova</option>

            <option value="Albania">Albania</option>

            <option value="Afghanistan">Afghanistan</option>

            <option value="Algeria">Algeria</option>

            <option value="Andorra">Andorra</option>

            <option value="Argentina">Argentina</option>

            <option value="Armenia">Armenia</option>

            <option value="Australia">Australia</option>

            <option value="Austria">Austria</option>

            <option value="Azerbaijan">Azerbaijan</option>

            <option value="Bahrain">Bahrain</option>

            <option value="Bangladesh">Bangladesh</option>

            <option value="Belarus">Belarus</option>

            <option value="Belgium">Belgium</option>

            <option value="Bhutan">Bhutan</option>

            <option value="Bolivia">Bolivia</option>

            <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>

            <option value="Brazil">Brazil</option>

            <option value="Brunei">Brunei</option>

            <option value="Bulgaria">Bulgaria</option>

            <option value="Burkina Faso">Burkina Faso</option>

            <option value="Cambodia">Cambodia</option>

            <option value="Cameroon">Cameroon</option>

            <option value="Canada">Canada</option>

            <option value="Chile">Chile</option>

            <option value="China">China</option>

            <option value="Colombia">Colombia</option>

            <option value="Congo (Kinshasa)">Congo (Kinshasa)</option>

            <option value="Costa Rica">Costa Rica</option>

            <option value="Cote d'Ivoire">Cote d'Ivoire</option>

            <option value="Croatia">Croatia</option>

            <option value="Cruise Ship">Cruise Ship</option>

            <option value="Cuba">Cuba</option>

            <option value="Cyprus">Cyprus</option>

            <option value="Czechia">Czechia</option>

            <option value="Denmark">Denmark</option>

            <option value="Dominican Republic">Dominican Republic</option>

            <option value="Ecuador">Ecuador</option>

            <option value="Egypt">Egypt</option>

            <option value="Estonia">Estonia</option>

            <option value="Finland">Finland</option>

            <option value="France">France</option>

            <option value="French Guiana">French Guiana</option>

            <option value="Georgia">Georgia</option>

            <option value="Germany">Germany</option>

            <option value="Greece">Greece</option>

            <option value="Guyana">Guyana</option>

            <option value="Holy See">Holy See</option>

            <option value="Honduras">Honduras</option>

            <option value="Hungary">Hungary</option>

            <option value="Iceland">Iceland</option>

            <option value="India">India</option>

            <option value="Indonesia">Indonesia</option>

            <option value="Iran">Iran</option>

            <option value="Iraq">Iraq</option>

            <option value="Ireland">Ireland</option>

            <option value="Israel">Israel</option>

            <option value="Italy">Italy</option>

            <option value="Jamaica">Jamaica</option>

            <option value="Japan">Japan</option>

            <option value="Jordan">Jordan</option>

            <option value="Korea, South">Korea, South</option>

            <option value="Kuwait">Kuwait</option>

            <option value="Latvia">Latvia</option>

            <option value="Lebanon">Lebanon</option>

            <option value="Liechtenstein">Liechtenstein</option>

            <option value="Lithuania">Lithuania</option>

            <option value="Luxembourg">Luxembourg</option>

            <option value="Malaysia">Malaysia</option>

            <option value="Maldives">Maldives</option>

            <option value="Malta">Malta</option>

            <option value="Martinique">Martinique</option>

            <option value="Mexico">Mexico</option>

            <option value="Moldova">Moldova</option>

            <option value="Monaco">Monaco</option>

            <option value="Mongolia">Mongolia</option>

            <option value="me">Montenegro</option>

            <option value="Morocco">Morocco</option>

            <option value="Nepal">Nepal</option>

            <option value="Netherlands">Netherlands</option>

            <option value="New Zealand">New Zealand</option>

            <option value="Nigeria">Nigeria</option>

            <option value="North Macedonia">North Macedonia</option>

            <option value="Norway">Norway</option>

            <option value="Oman">Oman</option>

            <option value="Pakistan">Pakistan</option>

            <option value="Panama">Panama</option>

            <option value="Paraguay">Paraguay</option>

            <option value="Peru">Peru</option>

            <option value="Philippines">Philippines</option>

            <option value="Poland">Poland</option>

            <option value="Portugal">Portugal</option>

            <option value="Qatar">Qatar</option>

            <option value="Reunion">Reunion</option>

            <option value="Romania">Romania</option>

            <option value="Russia">Russia</option>

            <option value="San Marino">San Marino</option>

            <option value="Saudi Arabia">Saudi Arabia</option>

            <option value="Senegal">Senegal</option>

            <option value="Serbia">Serbia</option>

            <option value="Singapore">Singapore</option>

            <option value="Slovakia">Slovakia</option>

            <option value="Slovenia">Slovenia</option>

            <option value="South Africa">South Africa</option>

            <option value="Spain">Spain</option>

            <option value="Sri Lanka">Sri Lanka</option>

            <option value="Sweden">Sweden</option>

            <option value="Switzerland">Switzerland</option>

            <option value="Taiwan*">Taiwan*</option>

            <option value="Thailand">Thailand</option>

            <option value="Togo">Togo</option>

            <option value="Tunisia">Tunisia</option>

            <option value="Turkey">Turkey</option>

            <option value="US">US</option>

            <option value="Ukraine">Ukraine</option>

            <option value="United Arab Emirates">United Arab Emirates</option>

            <option value="United Kingdom">United Kingdom</option>

            <option value="Vietnam">Vietnam</option>

        </select>

    </div>

    </div>

    <div class="col-lg-3 col-md-3 col-12">

    <div class="mapi-info">

        <p class="title-mapi">Confirmed</p>

        <span class="nr-mapi" id="c_confirmed"></span>

    </div>

    <div class="mapi red"></div>

    </div>

    <div class="col-lg-3 col-md-3 col-12">

    <div class="mapi-info">

        <p class="title-mapi">Recovered</p>

        <span class="nr-mapi" id="c_recovered"></span>

    </div>

    <div class="mapi green"></div>

    </div>

    <div class="col-lg-3 col-md-3 col-12">

    <div class="mapi-info">

        <p class="title-mapi">Deaths</p>

        <span class="nr-mapi" id="c_deaths"></span>

    </div>

    <div class="mapi gray"></div>

    </div>

</body>

</html>

<script>

$(document).on('change','.corona-select', function(){

    var city = $(this).val();

    if(city == 'Kosovo'){

        $('#c_confirmed').html();

        $('#c_recovered').html();

        $('#c_deaths').html();

    }

    else if(city == 'total'){

        $('#c_confirmed').html();

        $('#c_recovered').html();

        $('#c_deaths').html();

    }

    else{

        $.get( "https://covid19.mathdro.id/api/countries/" + city, function( data ) {

            $('#c_confirmed').html(data.confirmed.value);

            $('#c_recovered').html(data.recovered.value);

            $('#c_deaths').html(data.deaths.value);

        });

    }

    

});</script>