php - 使用 AJAX 从 SQL 获取信息并放入表中

Question

我想创建一个 2x2 表，第一行标签，第二行包含我从 sql 表中获取的信息。我想在左侧显示公司名称，在右侧显示信息。我想保持2x2，这样左边会有多个按钮样式的名字，点击后会在右边显示相关信息。所以它看起来会像这样。

|--------------------|---------------------|
|       NAME         |        INFO         |
|--------------------|---------------------|
|    BusinessName1   |       their info    |
|    BusinessName2   |                     |
|    BusinessName3   |                     |
|--------------------|---------------------|

问题是我希望能够单击商家名称并在右侧显示其信息。我使用 AJAX 和 php 来检索和显示 BusinessName，只是不确定如何使 BusinessName 按钮在右侧显示相关信息。

存储信息的表称为业务，包含列、名称和信息。

这是我迄今为止获取名称并将其粘贴到表格中的代码:

Main.php

//script for sending value 'business' to getTable.php. which will return the list of all business 
//names in button form.

<script type='text/javascript'>
function showTable(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

xmlhttp.open("GET","getTable.php?q="+str,true);
xmlhttp.send();

}
</script>

<?php ob_start(); ?> //using templates

//menu bar, onclick of button 'Business Basics' will run showTable script and pass value 'business' to it.
 <table width="829" border="1" cellspacing="5" cellpadding="2" align="center">
        <tr>
        <th scope="col" align="center"><button onclick="showTable(this.value)" value="business">    
        Business Basics </button></th>
        <th scope="col" align="center"><a href="" > Co-working spaces</a></th>
        <th scope="col" align="center"><a href=""> Events</a></th>
        <th scope="col" align="center"><a href=""> Entrepreneur organisations</a></th>
        </tr>
        <tr>
        <th scope="col" align="center"><a href=""> Free/Cheap resoucres</a></th>
        <th scope="col" align="center"><a href=""> Government Grants</a></th>
        <th scope="col" align="center"><a href=""> Government websites</a></th>
        <th scope="col" align="center"><a href=""> Internships</a></th>
       </tr>
       </table>

    <h1> Some stuff</h1>

    //table where the info will be displayed, 'txtHint' is where the business names are being   
    //displayed and 'txtHint2' is where i want the relevant info to be displayed.

    <table width="100%" width="830" border="1" cellpadding="2" cellspacing="5" align="center">
    <tr>
    <th scope="col" align="center" width="50%"> Pick one </th>
    <th scope="col" align="center" width="50%"> More Information </th>
    </tr>
    <tr>
    <th scope="col" align="left" width="50%"> <div id="txtHint"><b>Pick a category!</b></div></th>
    <th scope="col" align="left" width="50%"> <div id="txtHint2"><b>more info over here</b></div>    
    </th>
    </tr>
    </table> 

getTable.php

<?php

$q=$_GET["q"];
$count = 0;

$con = mysqli_connect('localhost','root','root','bregu');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

$result = mysqli_query($con,"SELECT * FROM `".$q."`");  //$q is the value 'business'

while($row = mysqli_fetch_array($result))
{
echo '<lo><button value="name" type="submit">'.$row['name'].'</lo><br>';
$count++;
}
mysqli_close($con);

?>

这就是我到目前为止所拥有的。它将返回一个企业名称列表作为单独的按钮。现在我可以使用一些理论或编码的帮助，这将允许我单击公司名称并在表格右侧显示其信息。

Answer 1

您正在尝试像此 document.getElementById("txtHint") 一样获取元素 txtHint 但该元素在哪里？？？因为它找不到任何具有该名称的元素，所以它不起作用。还要确保您在 ajax 调用中得到响应。您可以使用 console.log(xmlhttp.responseText) 或alert(xmlhttp.responseText) 来检查这一点。