Как вывести значения выпадающего списка начальной загрузки из базы данных с помощью вызова ajax?

Question

Я имею выпадающий список Bootstrap в моем HTML, который при нажатии на должны перечислить значения из базы данных Postgres через запрос AJAX

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Region/Country 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li> 
     <a href="#"></a> 
    </li> 
    </ul> 
</div> 

Это мой служебный код PHP, который вызывается с помощью AJAX, когда выпадающий щелкают:

$result = pg_query($dbh, "SELECT country from countries"); 

if (!$result) { 
    echo "An error occurred.\n"; 
    exit; 
} 
$features = array(); 

while ($row = pg_fetch_array($result)) { 
    $features[] = array("country" => array($row[0])); 
} 

$result_feature = $features; 

echo json_encode($result_feature); 

я пытался что-то вроде ниже

$(".dropdown-toggle").dropdown({ 
       source: function (request, response) { 
        $.ajax({ 
         url: 'KFRI_Service.php', 
         dataType: 'json',//since you wait for json 
         data: { 
          'service': 'dropdown' 
         }, 
         success: function(json){ 
         //now when you received json, render options 
          $.each(json, function(i, option){ 
           var rendered_option = '<li><a href="#">'+ option.country +'</a></li>'; 
           $(rendered_option).appendTo('.dropdown-menu'); 
          }) 
         } 
        }) 

       } 
      }) 

current dropdown

Answer 1

Что-то вроде этого:

$.ajax({ 
    url: 'url', 
    dataType: 'json', //since you wait for json 
    success: function(json) { 
    //now when you received json, render options 
    $.each(json, function(i, option) { 
     var rendered_option = '<li><a href="#">' + option.country + '</a></li>'; 
     $(rendered_option).appendTo('.dropdown-menu'); 
    }) 
    } 
}) 

И кстати - так как интерфейс ждет JSON, вы не всегда повторяют текст, например, вам нужно написать сообщение об ошибке:

if (!$result) { 
    echo "An error occurred.\n"; 
    exit; 
} 

Плохое - потому что на стороне клиента JQuery попытается проанализировать ответ JSON и будет бесшумно терпеть неудачу в случае ошибки.

Должно быть сделано так:

if (!$result) { 
    echo json_encode(['error' => 'An error occurred.']); 
    exit; 
} 

Теперь можно легко проверить на стороне клиента:

success: function(json){ 

    if (json.error) { 
    alert(json.error); 
    } else { 
    // do your stuff 
    } 

} 

Answer 2

Вы можете сделать функцию, чтобы получить данные PHP, как JSON с помощью AJAX, как это:

function getJSON(callback){ 
    return $.ajax({ 
    url: your_php_script_url, //the url of the PHP script where your echo your JSON 
    dataType:'json', 
    type: 'POST', 
    success: callback 
    }); 
} 

А затем вызвать вашу функцию getJSON так:

getJSON(function(data){ 
    // where data is your data from PHP 
}); 

И здесь на вас просто просто нужно создать выпадающий список и перечислить элементы в нем, например, с помощью цикла for in.