PHP动态下拉菜单按ID获取值[关闭]

Question

这是我的问题的背景信息：我正在从 SQL 表中选择数据，该表具有“ID (osm_id)”、“名称”和“坐标（方式）”列，每个列约有 300 个条目。我有一个下拉菜单可以显示所有可能的酒吧名称（它们在“名称”列中）。

现在我想获取所选酒吧的 坐标 并将它们显示在页面上。 到目前为止，这是我的代码：

<?php 
    ...
    $query = "SELECT osm_id, name, ST_asText(ST_transform(way,4326)) FROM planet_osm_polygon WHERE amenity LIKE 'pub' ORDER BY name ASC;";
    
    $result = pg_query($query) or die("Query error: " . pg_last_error());
?>
<select id="pub_select" name="pub_select" size="1">
<option value="">--- Select a Pub ---</option>

<?php
    $options='';
    while($line = pg_fetch_row($result))
    {
        $pub_id = $line[0];
        $pub_names = $line[1];
        $way_coords = $line[2];
        $options.="<option value='" . $pub_names . "'>$pub_names</option>";
        echo $options;
    }
    

    pg_free_result($result);
    pg_close($dbconn);
?>
</select>

<input type="submit" name="submit" value="Get building coordinates" />

我的导师建议我可以使用：

<select id="pub_select" name="pub_select" size="1" onchange="getMoreInfo()">

并调用函数getMoreInfo() 以进行详细查询（Pub ID -> Pub 坐标）并使用pub_select = document.getElementById('pub_select'); 作为我的 php 代码的 Javascript/Ajax-Call 中的 ID，并基本上使用 ID 过滤到获取坐标。但我不知道该怎么做：/

---

编辑： 所以，基本上我的问题是：我有一个数据库表，我从下拉菜单中选择一个酒吧。如何从同一张表中获取更多信息，例如对应列中的坐标。

Answer 1

澄清一些事情。您可以从选择元素传递选定的值，即

<select id="pub_select" name="pub_select" size="1" onchange="getMoreInfo(this.value)">

在你的 Javascript 代码中

<script>
function getMoreInfo( value ) {
 ...
}

如果您不必使用 AJAX 来获取结果，您可以将此信息插入选项值，即

while($line = pg_fetch_row($result)) {
    $data = implode( "|", $line );
    $pub_names = $line[1];
    echo "<option value='" . $data . "'>$pub_names</option>";
}

这将只是 |每条数据之间的分隔符。

在您的 JavaScript 函数中，您可以通过以下方式添加它：

<script>
function getMoreInfo( value ) {
  var data = value.split("|");

}

要将信息发送到网页，您需要一个可以显示数据的元素。使用 div 即

<div id='results'></div>

现在将您的数据放入 div 中，即

<script>
function getMoreInfo( value ) {
  var data = value.split("|");
  document.getElementById('results').innerHTML = "Name : "+data[1]+"<br>Co-ords : "+data[2];
}

如果您必须使用 AJAX，那么事情会变得复杂得多。

Answer 2

您可以稍微修改您生成的 HTML，以便在选择菜单中为每个 option 包含一个 dataset 属性。 Javascript 事件处理程序getmoreinfo 将读取该数据集属性并将其用于对某些后端 php 脚本的 ajax 请求的一部分，该脚本将从数据库中获取更多结果。

<select id='pub_select' name='pub_select' size='1' onchange='getmoreinfo(e)'>
    <option selected disabled hidden>--- Select a Pub ---
    <?php
        while( $line = pg_fetch_row( $result ) ){
            printf(
                '<option value="%s" data-latlng="%s">%s',
                $line[0],
                $line[2],
                $line[1]
            );
        }
    ?>
</select>

您可以在 getmoreinfo 函数中使用 fetch api 发送 ajax 请求的简单版本。

<script>
    function getmoreinfo(e){
        /* choose the correct path for backend script */
        let baseurl='/path/to/backend/script.php';
        
        /* create the request payload */
        let args={
            'latlng':e.target.dataset.latlng,
            'id':e.target.value
        };
        
        /* generate the full url & querystring for the GET request */
        let url=baseurl + '?' + Object.keys(args).map(key=>{
            return [ encodeURIComponent(key), encodeURIComponent(args[key]) ].join('=')
        }).join('&');
        
        /* issue the ajax request */
        fetch( url )
            .then( r=>r.text() )
            .then( text=>{
                /* process the final response here */
                alert( text )
            })
    }
</script>

将 ajax 请求发送到的 backend 脚本的伪代码版本...这是伪代码，未经测试。

<?php

    # /path/to/backend/script.php
    
    if( $_SERVER['REQUEST_METHOD']=='GET' && isset(
        $_GET['latlng'],
        $_GET['id']
    )){
        $latlng=$_GET['latlng'];
        $id=$_GET['id'];
        
        $sql='select from sometable where id=? and latlng=?';
        $stmt=$dbo->prepare($sql);
        #... etc
    }
    
?>