Question

我的HTML中有一个Bootstrap下拉列表，点击后应该通过AJAX请求列出postgres数据库中的值

<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将PHP数据作为JSON获取，如下所示：

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循环列出其中的项目。

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

1 个答案: