JQuery getJSON вызывается несколько раз ломать

Question

один вызов getJSON, работает просто отлично ...

<div class="col-sm-3 col-xs-12" > 
    <label for="pickers" >Picker</label> 
    <select name="Picker" id="selectPicker" class="form-control" ></select> 
    <label for="grinners" >Grinner</label> 
    <select name="Grinner" id="selectGrinner" class="form-control" ></select> 
</div> 

<script> 
$(document).ready(function() { 

    //pickers 
    $.getJSON('/people.php', { get:'pickers' }, function(p){ 

     var pOptions = ''; 
     for (var pi=0; pi<=k['DATA'].length; pi++) { 

      pOptions += '<option value="' + p['DATA'][pi][0] + '">' + p['DATA'][pi][1] + ' (' + p['DATA'][pi][2] + ')</option>'; 

     } 

     $('#selectPicker').html(pOptions); 
    }); 



}); 
</script> 

однако - когда я добавить еще один вызов, он разбивает их обоих я получаю звонок, и ответ, отлично, объект JSON возвращается, но пользовательский интерфейс не заполняет выбор ...

Вышеуказанные работы. Если я добавлю это (ниже), это разрывает оба выбора ... Я назвал все vars разные, поэтому я не должен сталкиваться с каким-либо столкновением ...

<script> 
$(document).ready(function() { 

    //pickers 
    $.getJSON('/people.php', { get:'pickers' }, function(p){ 

     var pOptions = ''; 
     for (var pi=0; pi<=k['DATA'].length; pi++) { 

      pOptions += '<option value="' + p['DATA'][pi][0] + '">' + p['DATA'][pi][1] + ' (' + p['DATA'][pi][2] + ')</option>'; 

     } 

     $('#selectPicker').html(pOptions); 
    }); 

    //grinners 
    $.getJSON('/people.php', { get:'grinners' }, function(g){ 

     var gOptions = ''; 
     for (var gi=0; gi<=g['DATA'].length; gi++) { 

      gOptions += '<option value="' + g['DATA'][gi][0] + '">' + g['DATA'][gi][1] + ' (' + g['DATA'][gi][2] + ')</option>'; 

     } 

     $('#selectGrinner').html(gOptions); 
    }); 

}); 
</script> 

JSON выглядит следующим образом (только FYI):

Pickers;

{ 

    "COLUMNS":["ID","PERSON","POSITION"], 
    "DATA":[[1,"Jo Bob","Banjo"],[2,"Garth Waller","jug"],[3,"Boswell Higgins","washboard"]] 

} 

Grinners;

{ 

    "COLUMNS":["ID","PERSON","RELATION"], 
    "DATA":[[1,"Jimmy John","Grand-pappy"],[2,"Margie Monroe","Grammy"],[3,"'big' Tom Turney","cousin/brother"]] 

} 

Answer 1

Если вообще проблема с URL поймать мое решение, это добавить параметр запроса даты URL-адрес, как,

'/people.php?d="+ new Date() 

Где новый Date() является текущим яваскриптом даты. Опционально вы можете сделать один вызов и управлять кодом сервера, чтобы вернуть оба ответа в одном.

Answer 2

для этой конкретной проблемы - я думаю, что проблема «один», чтобы исправить это «< =» в моем цикле for, это должно быть только «<». Кажется, это исправить эту проблему.

for (var pi = 0; pi <= p['DATA'].length; pi++) { 

Должно быть

for (var pi = 0; pi < p['DATA'].length; pi++) { 

Мне нужно, чтобы подтвердить, что я не пропуская мой последний элемент массива, но теперь он работает.

Однако - на моем пути к поиску резолюции я кодирую ее по-другому - вот решение, которое работает для меня, более подробно, чем хотелось бы (особенно при изучении нового материала), я прихожу принять это в отношении JS.

О, и он делает несколько вызовов без проблем.

$(document).ready(function() { 

     $.ajax({ 
      method: 'POST', 
      url: '/game.cfm', 
      data: { get:'pickers' }, 
      dataType: 'json', 
      cache: false 
     }) 
     .fail(function(jqXHR) { 

      $("#msg").html(jqXHR.responseText + ' ' + jqXHR.statusText); 

     }) 
     .done(function(data) { 

      if (data['DATA'].length) { 

       var options = ''; 

       for (var i = 0; i < data['DATA'].length; i++) { 

        options += '<option value="' + data['DATA'][i][0] + '">' + data['DATA'][i][1] + ' (' + data['DATA'][i][2] + ')</option>'; 

       } 

       $('#selectPicker').html(options); 

      } else { 

       $('#selectPicker').html('<option value="0" >No Selections Available</option>'); 

      } 

     }); 

     });