简体   繁体   English

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

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

I have a drop down if the value selected in drop down its shows the data in html table regarding the value selected in dropdown, i have search box now search is working fine it displays result without refreshing the page ,problem is now its showing the drop down html table and searched value result on the same page ,but i want to display the searched result on the same html table,see my code below,can anyone guide me to do this thanks. 我有一个下拉菜单,如果在下拉菜单中选择的值在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 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>';
?>

for best practice separate your php code from html - get all the data from the db in an array before rendering the html, and afetr that just use foreach in the html to parse each row. 为了获得最佳实践,请将您的php代码与html分开-在呈现html之前先从数组中的数据库中获取所有数据,然后再在html中仅使用foreach来解析每一行。

put the DB login and connection in a differnet file and inlcude it with require_once() at top of the page 将数据库登录名和连接放在一个不同的文件中,并在页面顶部使用require_once()将其包含在内

display errors for better understandig of your script 显示错误以更好地了解您的脚本

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

comment "i am connection to mysql" this line since it will bring an error in this format 注释“我正在与mysql连接”这一行,因为它将以这种格式带来错误

After connecting to the DB initialize 连接到数据库后初始化

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

and check the http_request so that it won't bring any errors when first accessing the page without the $_POST data 并检查http_request,以便在第一次访问没有$ _POST数据的页面时不会出现任何错误

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

Ok, I see two issues with your HTML code. 好的,我看到您的HTML代码有两个问题。 One is that you are using two html elements with same ID ("content"), which is not the purpose of ID. 一种是您正在使用两个具有相同ID(“内容”)的html元素,这不是ID的目的。 Second, placing div inside the tbody is not valid HTML. 其次,将div放在tbody中是无效的HTML。

From your explanation I got that you are trying to show the result of both the actions in a single table. 从您的解释中,我得到您正在尝试在单个表中显示这两个操作的结果。 So, remove first div 因此,删除第一个div

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

from code and update code inside $.post to something like this 从$ .post中的代码和更新代码到这样的东西

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

Also, remove the div inside tbody as well. 同样,也删除tbody内的div。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM