如何使用ajax或php按鍵顯示記錄？

Question

我可以在頁面上顯示記錄，點擊搜索按鈕後搜索也可以正常工作。現在我的問題是如何顯示按鍵上的記錄。

例如，如果有任何用戶在搜索文本字段上鍵入記錄將搜索並顯示在屏幕上的任何內容，則在同一頁上有100條記錄。

你能幫我嗎？

HTML

<script> 
$(function() { 
$('#valueToSearch').on('keyup',function(){ 
    //Your ajax call will go Here 
    $.ajax({ 
    url:senddata.php, // separate file for search 
    data : { 
     q : $('#valueToSearch').val().trim() 
    }, 
    method:'POST', 
    dataType:'json', 
    success:function(data){ 
     $('#fetch_record').html(data); 
    }, 
    error:function(data){ 
    alert("something has gone wrong"); 
    } 
    }); 
}); 
}); 
    </script> 
    <form action="" method="post"> 
     <input type="text" name="valueToSearch" placeholder="Value To Search"><br><br> 
     <input type="submit" name="search" value="search"><br><br> 

     <table> 
      <tr> 
       <th>Id</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email</th> 
      </tr> 

    <!-- populate table from mysql database --> 
      <?php while($row = mysqli_fetch_array($search_result)):?> 
      <tr> 
       <td><?php echo $row['id'];?></td> 
       <td><?php echo $row['firstname'];?></td> 
       <td><?php echo $row['lastname'];?></td> 
       <td><?php echo $row['email'];?></td> 
      </tr> 
      <?php endwhile;?> 
     </table> 
    </form> 

senddata.php

if(isset($_POST['q']) && $_POST['q'] !=''){ 
$valueToSearch = $_POST['q']; 

// your sql query for Searching result 
$query = "SELECT * FROM `test` WHERE CONCAT(`id`, `firstname`, `lastname`, `email`) LIKE '%".$valueToSearch."%'"; 
$result = $conn->query($query); 

if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     $id=$row["id"]; 
     $fn=$row["firstname"]; 
     $ln=$row["lastname"]; 
     $email=$row["email"]; 
    } 
} 
return json_encode($id, $fn, $ln, $email); 
} 

Answer 1

爲您必須解決與Ajax，而且會有很多的變化，我希望你是清楚的帶有Javascript的基本概念

下面的代碼會給你一個頭開始。

$('#searchboxID').on('keyup',function(){ 
    //Your ajax call will go Here 
    $.ajax({ 
    url:senddata.php, // separate file for search 
    data : { 
     q : $('#searchboxID').val().trim() 
    }, 
    method:'POST', 
    dataType:'json', 
    success:function(data){ 
     // replace your data in html 
    }, 
    error:function(data){ 
    alert("something has gone wrong"); 
    } 
    }); 
}); 

IN sendata.php

if(isset($_POST['q']) && $_POST['q'] !=''){ 
// your sql query for Searching result 
return your result in json encoded format 
} 

希望這會有所幫助。

Answer 2

1. 這是如何檢測輸入更改並從輸入框中獲取值。

$("input").keyup(function(e){ 
 
    console.log($(this).val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" />

@Krunal解釋如何使一個Ajax調用

修改搜索代碼，以便您的搜索$_POST['valueToSearch']匹配參數名在ajax請求@Krunal寫道（不像$_POST['q']。注 - SANITIZE接收數據之前執行這樣的查詢

您的php腳本應該使用json_encode()函數返回json編碼數組。你可以簡單地回顯結果字符串。

在ajax調用中處理帶有success屬性的回顯數據。開始只需console.log() -ing它並按照步驟6進行操作。

步行接收的數組並將創建的html元素附加到父容器中。示例在一個snippet

Answer 3

最後，我發現我的解決方案使用Ajax和我做了一個準備好的聲明。首先，我在索引頁面中顯示所有記錄，並且如果用戶輸入了搜索內容，則會傳遞Ajax到流程頁面並返回索引頁面。

請檢查我的代碼，並幫助我更安全和簡單的方法或減少代碼行數。

的index.php

<input type="text" name="search" > 
    <div id="table-container"> 
    <?php 
    $query="SELECT id, firstname, lastname, email, message, location FROM test"; 
    if ($stmt = $conn->prepare($query)) { 
     $stmt->execute(); 
     $stmt->bind_result($id, $firstname, $lastname, $email, $message, $location); 
     echo '<table border="1"'; 
     echo '<tr> 
      <th>Id</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email.</th> 
      <th>Message</th> 
      <th>location</th> 
     </tr>'; 

     while ($stmt->fetch()) { 
      echo'<tr> 
      <td><input type="checkbox" onclick="" name="checkbox[]" value='.$id.'></td> 
       <td>'.$firstname.'</td> 
       <td>'.$lastname.'</td> 
       <td>'.$email.'</td> 
       <td>'.$message.'</td> 
       <td>'.$location.'</td> 
      </tr> 
       '; 
     } 
      echo '</table>'; 
     $stmt->close(); 
    } 
    $conn->close(); 
    ?> 
    </table> 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() 
        { 
     $("input[name='search']").on('keyup',function() 
      { 
      var keyword = $(this).val(); 
      $.ajax(
      { 
       url:'process.php', 
       type:'POST', 
       data:'request='+keyword, 
       success:function(data) 
       { 
        $("#table-container").html(data); 
        //alert(data); 
       }, 
      }); 
     }); 
    }); 
</script> 

Process.php

$request=$_POST['request']; 

$query="SELECT id, firstname, lastname, email, message, location FROM `test` WHERE firstname LIKE '%" .$request. "%' OR lastname LIKE '%".$request ."%' OR email LIKE '%" .$request ."%' OR location LIKE '%" .$request ."%'"; 
if ($stmt = $conn->prepare($query)) { 
    $stmt->execute(); 
    $stmt->bind_result($id, $firstname, $lastname, $email, $message, $location); 

    echo '<table border="1"'; 
    echo '<tr> 
     <th>Id</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Email.</th> 
     <th>Message</th> 
     <th>location</th> 
    </tr>'; 

    while ($stmt->fetch()) { 
     echo'<tr> 
      <td><input type="checkbox" onclick="" name="checkbox[]" value='.$id.'></td> 
      <td>'.$firstname.'</td> 
      <td>'.$lastname.'</td> 
      <td>'.$email.'</td> 
      <td>'.$message.'</td> 
      <td>'.$location.'</td> 
     </tr> 
      '; 
    } 
    $stmt->close(); 
} 
$conn->close();