使用 php 和 javascript 在同一个 html 表中搜索 MYSQL 并显示结果答案

【问题标题】：Search MYSQL and display results inside the same html table using php and javascript使用 php 和 javascript 在同一个 html 表中搜索 MYSQL 并显示结果
【发布时间】：2014-01-30 19:28:09
【问题描述】：

如果在下拉列表中选择的值显示了 html 表中关于下拉列表中选择的值的数据，我有一个下拉列表，我有搜索框现在搜索工作正常它显示结果而不刷新页面，问题现在是它在同一页面上显示下拉 html 表和搜索值结果，但我想在同一个 html 表上显示搜索结果，请参阅下面的代码，谁能指导我这样做谢谢。

<html>

<select name="client" id="client" style="margin:-8px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;"> 
<option value="">Select Client</option>
<?php
i am connection to mysql
$sql=mysql_query("xxxxxxxxxx");
$clientid=$_GET['clientid'];
while($row=mysql_fetch_assoc($sql))
{
if(strlen($_GET['clientid'])>0 && $_GET['clientid']==$row['clientid'])
{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
else{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
}
?>
</select>

     <form id="lets_search" action="" style="width:0px;margin:-27px 0 0;text-align:left;">
                   <input type="text" name="region" id="region"> 
                   <input type="text" name="country" id="country">
                   <input type="submit" value="search" name="search" id="search">
          </form>

     <div id="content"></div>

    <table id="CPH_GridView1"  >
    <thead class="fixedHeader">
    <tr>
    <th style=" width:103px">Region  </th>
    <th style=" width:102px" >Country </th>

    <tbody id="fbody" class="fbody" style="width:1660px" >
    <div id="content">
    <?php
    $client_id  = $_POST['title'];
    if($client_id!=""){
    $sql_selectsupplier  = "xxxxxxxxxxx";
    echo '   <td style="width:103px" class=" '.$rows["net_id"].'">'.$rows["clientid"].'</td>
             <td style="width:102px" id="CPH_GridView1_clientid" class=" '.$rows["net_id"].'">'.$rows["region"].'</td>';

    </div>
    </tbody>
    </table>

    </html>

//javascript on the same page

<script type="text/javascript">
      $(function() {
        $("#lets_search").bind('submit',function() {
         var valueregion = $('#region').val();
          var valuecountry = $('#country').val();
          $.post('clientnetworkpricelist/testdb_query.php',{valueregion:valueregion,valuecountry:valuecountry}, function(data){
             $("#content").html(data);
           });
           return false;
        });
      });
    </script>

testdb_query.php

<?php

$dbHost = 'localhost'; // usually localhost
$dbUsername = 'xxxxxx';
$dbPassword = 'xxxxxxxxxxxx';
$dbDatabase = 'xxxxxxxxxxxxxx';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");

$region=$_POST['valueregion'];
$country=$_POST['valuecountry'];
$clientid=$_POST['clientid'];

if (strlen($region) > 0 && $region!="" ){

                $sql_search.= " AND s.region = '".$region."' ";

                }

if (strlen($country) > 0 && $country!="" ){

                $sql_search.= " AND s.country = '".$country."' ";

                }
$query = mysql_query("SELECT * FROM supplierprice s,$clientid c WHERE s.supp_price_id = c.net_id $sql_search");

echo '<table>';

while ($data = mysql_fetch_array($query)) {

  echo '
  <tr>
        <td style="font-size:18px;">'.$data["region"].'</td>        
    <td style="font-size:18px;">'.$data["country"].'</td>
</tr>';

}

echo '</table>';
?>

【问题讨论】：

标签： javascript php jquery html mysql

【解决方案1】：

为了获得最佳实践，将您的 php 代码与 html 分开 - 在呈现 html 之前从数组中获取数据库中的所有数据，然后在 html 中使用 foreach 来解析每一行。

将数据库登录和连接放在不同的文件中，并在页面顶部使用 require_once() 包含它

显示错误以便更好地理解您的脚本

ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);

comment "i am connection to mysql" 这一行，因为它会带来这种格式的错误

连接数据库后初始化

$sql_search = ""; // otehrwise it will bring a notice when calling "$sql_search.="

并检查http_request，以便在没有$_POST数据的情况下首次访问页面时不会带来任何错误

if ( $_SERVER['REQUEST_METHOD'] === 'POST')
{
   //code for displaying the new table with the post data
}

【讨论】：

【解决方案2】：

好的，我发现您的 HTML 代码存在两个问题。一是您使用了两个具有相同 ID（“内容”）的 html 元素，这不是 ID 的目的。其次，将 div 放在 tbody 内不是有效的 HTML。

从您的解释中，我了解到您正试图在一个表格中显示这两个操作的结果。所以，删除第一个 div

    <div id="content"></div>

从 $.post 中的代码和更新代码到类似这样的内容

    $("#CPH_GridView1").append(data);

另外，删除 tbody 内的 div。

【讨论】：