Question

我有一个代码，最初从数据库中提取最近输入的5行。我添加了一个文本字段和一个按钮，通过它我们可以搜索数据库中的数据。当我在文本字段中添加一些文本时，程序使用sql中的like函数提取数据并将其显示在容器div中。但是，如果我清除文本字段中输入的所有文本，则容器div中不显示任何内容。我希望我的代码显示最近存储在数据库中的五个数据，因为它最初显示。请有人编辑我的代码。

这是我的主要代码。

<!doctype html>
<html>
 <head>
  <title>Bootstrap Table</title>
  <link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
  <script src="bootstrap/jquery-3.1.1.min.js"></script>
  <script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
  <style>
   .container{margin:auto;}
  </style>
 </head>
 <body>
  <div class='input-group' style='margin-left:70%;'>
   <input type="text" id="search_data" class="col-xs-2">
   <input type="submit" id="search_button" class="btn-info go inline" value="Search" style="cursor:pointer; position:absolute; ">
  </div>
  <div class="container">
  </div>
  <script id="source" language="javascript" type="text/javascript">
   $('#output').append("<br /><h3><center>Employee Table</center></h3>");
    var html = "<br /><h3><center>Employee Table</center></h3>";
    $.ajax({                                      
     url: 'bootstrap_table_db1.php', data: "", dataType: 'json', success: function(rows)       
      {
        html+= "<div class='table-responsive'>";
        html+= "<table  class='table table-bordered table-striped'>";
        html+=  "<tr>" +
                  "<th>Employee Name</th>" +
                  "<th>Email</th>" +
                  "<th>Message</th>" +
                  "<th>Date</th>" +
                "</tr>"
        for (var i in rows)
         {
          var row = rows[i];
          var employee_name = row[1];
          var email = row[2];
          var message = row[3];
          var date = row[4];
          html+= "<tr>" +
                    "<td width='25%'>" + employee_name + "</td>" +
                    "<td width='25%'>" + email + "</td>" +
                    "<td width='25%'>" + message + "</td>" +
                    "<td width='25%'>" + date + "</td>" +
                 "</tr>";                  
         }
        html+= "</table>";
        html+= "</div>";
        $(".container").html(html);
      }
     });
  </script>

  <script id="source" language="javascript" type="text/javascript">
   $('#search_data').keyup(function()
    {
     var search_data = $('#search_data').val();
     $.ajax(
      {
       type: "POST",
       url: 'bootstrap_table_db2.php',
       data: {search: search_data},
       dataType: 'html',
       success: function(result)
        {
         $(".container").html(result);
        }
      });
   });
  </script>
 </body>
</html>

这是我提取数据的代码。

<!doctype html>
<html>
 <head>
  <link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
  <script src="bootstrap/jquery-3.1.1.min.js"></script>
  <script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
 </head>
 <body>
  <?php 
   mysql_connect("localhost", "root", "password") || die(mysql_error());
   mysql_select_db("emp") || die(mysql_error());
   if(isset($_POST['search']) && !empty($_POST['search']))
    {
     $s = $_POST['search'];
     if(!empty($s))
     {
     $result2 = mysql_query("SELECT * FROM employee WHERE Employee_name LIKE '%$s%' || Email LIKE '%$s%'|| Message LIKE '%$s%' ");
     }
     echo "<div class='table-responsive'>";
      echo "<table class='table table-bordered table-striped' style='width:80%; margin-left:9%;'>";
       echo "<tr>".
                "<th>Employee Name</th>".
                "<th>Email</th>".
                "<th>Message</th>".
               "<th>Date</th>".
            "</tr>";
      while ( $row = mysql_fetch_array($result2) )
       {
        echo "<tr>";
        echo '<td width=\'25%\'>'.$employee = $row['Employee_name'].'</td>';
        echo '<td width=\'25%\'>'.$email = $row['Email'].'</td>';
        echo '<td width=\'25%\'>'.$message = $row['Message'].'</td>';
        echo '<td width=\'25%\'>'.$date = $row['Date'].'</td>';
        echo "</tr>";
       }
      echo "</table>";
     echo "</div>";
    }
  ?>
 </body>
</html>

ajax代码，用于根据数据库中的用户需求提取数据库

0 个答案: