簡體   English   中英

使用php和javascript搜索MYSQL並在同一html表中顯示結果

[英]Search MYSQL and display results inside the same html table using php and javascript

我有一個下拉菜單,如果在下拉菜單中選擇的值在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>';
?>

為了獲得最佳實踐,請將您的php代碼與html分開-在呈現html之前先從數組中的數據庫中獲取所有數據,然后再在html中僅使用foreach來解析每一行。

將數據庫登錄名和連接放在一個不同的文件中,並在頁面頂部使用require_once()將其包含在內

顯示錯誤以更好地了解您的腳本

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

注釋“我正在與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
}

好的,我看到您的HTML代碼有兩個問題。 一種是您正在使用兩個具有相同ID(“內容”)的html元素,這不是ID的目的。 其次,將div放在tbody中是無效的HTML。

從您的解釋中,我得到您正在嘗試在單個表中顯示這兩個操作的結果。 因此,刪除第一個div

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

從$ .post中的代碼和更新代碼到這樣的東西

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

同樣,也刪除tbody內的div。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM