du77887
du77887
2016-08-16 07:44
浏览 77

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douyakan8924
    douyakan8924 2016-08-16 07:49
    已采纳

    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
      }
    
    }
    
    点赞 评论
  • dsoihsnz85757
    dsoihsnz85757 2016-08-16 07:47

    You can make a function to get the PHP data as JSON using AJAX like this:

    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
      });
    }
    

    And then call your getJSON function like this:

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

    And from here on you just simply need to create a dropdown and list the items in it using a for in loop for example.

    点赞 评论

相关推荐