悬停时弹出，从 Mysql 数据库中填写

Posted 2023-05-09

【中文标题】悬停时弹出，从 Mysql 数据库中填写

【英文标题】：Popover on hover, fill out from Mysql Database

【发布时间】：2018-03-23 07:24:24

【问题描述】：

在我的网络中，当悬停在一行上时，我会显示一个包含数据的弹出表。 我想要做的是从数据库中获取这些数据。 目前它看起来像这样：

<td id="popupContent" data-trigger='hover' data-container="body"
                                data-toggle="popover"
                                data-content=" 
                                                                                             <div class='table-responsive'>
            <table class='sastable table-striped table-bordered' data-toggle='table' data-height='150' data-classes='table  table-striped table-bordered'>
                <thead id='head'>
                    <tr>
                        <th class='col-md-6'>Value</th>
                        <th class='col-md-6'>Score</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class='col-md-6'>0</td>
                        <td class='col-md-6'>1</td>
                    </tr>
                    <tr>
                        <td class='col-md-6'>10</td>
                        <td class='col-md-6'>2</td>
                    </tr>
                    <tr>
                        <td class='col-md-6'>20</td>
                        <td class='col-md-6'>3</td>
                    </tr>

                </tbody>
            </table>
        </div>"
                                data-html="true"></td>
                        </tr>

还有js函数：

        $(function() 
        $('#popupContent')
                .popover(
                    container : 'body'
                );
    );

在我的数据库中，我有一个这样的表：

输入价值分数

type1 0 1

类型1 10 2

....

类型2 0 1

基于 td 的 Id，我希望能够调用某个类型以及所有值和分数以将它们放在弹出表中。

我如何做到这一点？

在 Spring 控制器中，我有一个 RestController，它返回一个带有表格的 JSON 文件

@RequestMapping(path="/scores", method=RequestMethod.GET)
public List<Scores> getAllScores()
    return scoreService.getAllScores();

也许我可以有这样的功能：

function getClientResults(type) 

// if type=="popupContent"
var url "/scores/"+type1 or something ?
$.getJSON(url, function(data)  
  \\change table values ??

我在正确的轨道上吗？还是有更好的方法来做到这一点？任何帮助，将不胜感激 ！谢谢

【参考方案1】：

方式 1 您将在页面顶部注入一个 php，您将在其中连接到数据库并执行查询以获取数据并将其写入该弹出表，例如 <? echo $query['whatever']; ?>。

方式 2 您将创建自治查询页面，当您悬停该行时，它将向该页面发送 ajax 请求接收数据并将其加载到弹出窗口中。