jQuery API 调用未返回预期数据
我正在尝试通过 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);
});
}
});
喵喔喔浏览 143回答 3
3回答
-
qq_花开花谢_0
查看 API，您的<select>选项中有一个拼写错误：Kosova不会工作，但Kosovo会：https://covid19.mathdro.id/api/countries/Kosovahttps://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 valuefunction 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 immediatelyshowValuesForCountry('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> -
jeck猫
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); }); }}); -
慕少森
您可以通过在 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>
随时随地看视频慕课网APP
相关分类
JavaScript