Javascript 以模式输出MySQL数据
我一直在寻找解决我的问题的方法,并找到了一些使用AJAX的方法。然而,他们不是为我工作。没有AJAX有什么方法可以做到这一点吗? 我已经为我建立了一个小门户来查看我的客户机信息,我正在尝试以MDBootstrap模式输出一些MySQL数据。除了模态出现的部分(只有第一个DB行出现)之外,所有功能都正常。这是我到目前为止所拥有的Javascript 以模式输出MySQL数据,javascript,php,bootstrap-4,bootstrap-modal,mdbootstrap,Javascript,Php,Bootstrap 4,Bootstrap Modal,Mdbootstrap,我一直在寻找解决我的问题的方法,并找到了一些使用AJAX的方法。然而,他们不是为我工作。没有AJAX有什么方法可以做到这一点吗? 我已经为我建立了一个小门户来查看我的客户机信息,我正在尝试以MDBootstrap模式输出一些MySQL数据。除了模态出现的部分(只有第一个DB行出现)之外,所有功能都正常。这是我到目前为止所拥有的 $con=mysqli_connect("localhost","db_user","dbpass","db"); // Check connection if (mys
$con=mysqli_connect("localhost","db_user","dbpass","db");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to database: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM clients");
echo "<table id='clientsInfo' class='table table-striped table-bordered table-sm cellspacing=0 width=100%'>
<thead>
<tr>
<th class='th-sm'>Client
</th>
<th class='th-sm'>Website URL
</th>
<th class='th-sm'>cPanel
</th>
<th class='th-sm'>Webmail
</th>
<th class='th-sm'>Website Admin
</th>
<th class='th-sm'>Cloudflare
</th>
<th class='th-sm'>Client Info
</th>
</tr>
</thead>";
while($row = mysqli_fetch_array($result))
{
echo "<tbody>";
echo "<tr>";
echo "<td>" . $row['client_name'] . "</td>";
echo "<td><a target='_blank' href='" . $row['website_url'] . "'><button type='button' class='btn blue-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['cpanel'] . "'><button type='button' class='btn peach-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['webmail'] . "'><button type='button' class='btn purple-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['web_admin'] . "'><button type='button' class='btn blue-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><a target='_blank' href='" . $row['cloudflare'] . "'><button type='button' class='btn peach-gradient btn-sm'>Click Here</button></a></td>";
echo "<td><button type='button' data-toggle='modal' data-target='#fullHeightModalRight' class='btn btn purple-gradient btn-sm'>Client Info</button></td>
<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
aria-hidden='true'>
<!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
<div class='modal-dialog modal-full-height modal-right' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
" . $row['client_info'] . "
</div>
<div class='modal-footer justify-content-center'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
<!-- Client Info Modal -->";
echo "</tr>";
echo "</tbody>";
}
echo "<tfoot>";
echo "<tr>";
echo "<th>Client";
echo "</th>";
echo "<th>Website URL";
echo "</th>";
echo "<th>cPanel";
echo "</th>";
echo "<th>Webmail";
echo "</th>";
echo "<th>Website Admin";
echo "</th>";
echo "<th>Cloudflare";
echo "</th>";
echo "<th>Client Info";
echo "</th>";
echo "</tr>";
echo "</tfoot>";
echo "</table>";
mysqli_close($con);
?>```
$con=mysqli_connect(“localhost”、“db_user”、“dbpass”、“db”);
//检查连接
if(mysqli\u connect\u errno())
{
echo“未能连接到数据库:”.mysqli_connect_error();
}
$result=mysqli_查询($con,“从客户端选择*);
回声“
客户
网站地址
控制面板
网络邮件
网站管理员
云焰
客户信息
";
while($row=mysqli\u fetch\u数组($result))
{
回声“;
回声“;
回显“$row['client_name']”;
回声“;
回声“;
回声“;
回声“;
回声“;
回显“客户信息”
你好,世界
&时代;
“$row['client_info']”
接近
";
回声“;
回声“;
}
回声“;
回声“;
回应“客户”;
回声“;
回声“网站网址”;
回声“;
回声“cPanel”;
回声“;
回应“网络邮件”;
回声“;
回声“网站管理员”;
回声“;
回波“云耀斑”;
回声“;
回显“客户信息”;
回声“;
回声“;
回声“;
回声“;
mysqli_close($con);
?>```
从循环中移除
,并将其放在循环之前。同时将
放在循环后面
另外,从循环中删除此模式,并将其粘贴到HTML
部分末尾的
标记之前
<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
aria-hidden='true'>
<!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
<div class='modal-dialog modal-full-height modal-right' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body' id="dynamic_contents"></div>
<div class='modal-footer justify-content-center'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
<!-- Client Info Modal -->
然后为client\u info
按钮添加onClick
的触发器,如下所示
echo '<td><button type="button" class="btn btn purple-gradient btn-sm" onclick="open_modal(\''.$row['client_info'].'\')">Client Info</button></td>';
echo“客户信息”;
从循环中移除
,并将其放在循环之前。同时将
放在循环后面
另外,从循环中删除此模式,并将其粘贴到HTML
部分末尾的
标记之前
<!-- Client Info Modal -->
<div class='modal fade right' id='fullHeightModalRight' tabindex='-1' role='dialog' aria-labelledby='clientInfoLabel'
aria-hidden='true'>
<!-- Add class .modal-full-height and then add class .modal-right (or other classes from list above) to set a position to the modal -->
<div class='modal-dialog modal-full-height modal-right' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title w-100' id='clientInfoLabel'>Hello World</h4>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body' id="dynamic_contents"></div>
<div class='modal-footer justify-content-center'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
<!-- Client Info Modal -->
然后为client\u info
按钮添加onClick
的触发器,如下所示
echo '<td><button type="button" class="btn btn purple-gradient btn-sm" onclick="open_modal(\''.$row['client_info'].'\')">Client Info</button></td>';
echo“客户信息”;
能否提供问题的屏幕截图?你说只有几排是什么意思?它会从屏幕上消失吗?发生了什么事?@Difster所以事情是这样的。红色有效,蓝色应该显示每行的数据,但是它只显示第一行的内容。由于您已经更新了代码并修复了一些问题,例如修复了可排序性问题,请在此更新代码,以便我们可以检查您是如何更改代码的。能否提供问题的屏幕截图?你说只有几排是什么意思?它会从屏幕上消失吗?发生了什么事?@Difster所以事情是这样的。红色有效,蓝色应该显示每行的数据,但是它只显示第一行的内容。由于您已经更新了代码并修复了一些问题,例如修复了可排序性问题,请在此更新代码,以便我们可以检查您是如何更改代码的。您好,感谢您的贡献。它修复了我的排序错误。但是,将数据输出到modal的问题仍然存在。太好了!这起作用了。您有一个小的输入错误,被onClick作为openModal,编辑为open\u modal。再次感谢。嗨,谢谢你的贡献。它修复了我的排序错误。但是,将数据输出到modal的问题仍然存在。太好了!这起作用了。您有一个小的输入错误,被onClick作为openModal,编辑为open\u modal。再次感谢你。