如何使用ajax调用从数据库中列出bootstrap下拉项值？

Question

I am having a Bootstrap dropdown in my HTML which when clicked should list values from postgres database through AJAX request

<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>

This is my PHP service code which gets called by AJAX when the dropdown is clicked:

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

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

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

$result_feature = $features;

echo json_encode($result_feature);

I had tried something like below

$(".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

Something like this:

$.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');
    })
  }
})

And by the way - since frontend is waiting for JSON, you don't always echo your text, for example you need to write an error message:

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

That's bad - because on client side JQuery will try to parse JSON response and will silently fail in case of error.

Should be done like this:

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

Now it can easily be checked on client side:

success: function(json){

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

}