在不刷新頁面的情況下在同一頁面上顯示搜索結果

在瀏覽網站時，我發現了一個有趣的功能，我喜歡在我的應用程序中使用它。就像在同一頁面上顯示搜索結果而不刷新頁面一樣。當某人填寫表單的最後一個字段時，它會在同一頁面上顯示搜索結果而不刷新頁面。當有人填寫最後一個字段時，表單沒有提交按鈕或任何鏈接提交表單數據，並顯示結果。我想在我用PHP構建的應用程序中實現此功能。我知道這可以通過Javascript & Ajax來完成，但是我對這些語言沒有足夠的瞭解。我剛學過HTML，CSS，PHp & MySql。讓我告訴ü我的代碼在不刷新頁面的情況下在同一頁面上顯示搜索結果

HTML：

<form action="do_search.php" method="post"/> 
Enter Number:<input type="text" name="roll" id="roll"> 
<input type="submit" value="search record"/>

do_search.php：

<?php 
    include 'includes/dbConnect.php'; 
?> 
<?php 
    $roll = $_POST['roll']; 
    $result = mysql_query("SELECT * FROM students WHERE Roll_No = '$roll'") or die("SELECT Error: ".mysql_error()); 
    $num_rows = mysql_num_rows($result); 
    ?> 
<table width="100%" bgcolor="#F7F7F7" border="0"> 
<?php 
if ($num_rows!=0) 
{ 
?> 
<tr style="text-align:left;"> 
    <td width="7%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>#</strong></td> 
    <td width="13%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Roll No</strong></td> 
    <td width="29%" align="left" bordercolor="#CCCCCC" bgcolor="#996600"class="heading"><strong>Name</strong></td> 
    <td width="23%" align="left" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Father Name</strong></td> 
    <td width="16%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Class</strong></td> 
    <td width="12%" align="center" bordercolor="#CCCCCC" bgcolor="#996600" class="heading"><strong>Section</strong></td> 

</tr> 
    <?php 
//$counter = 1; 
    while ($get_info = mysql_fetch_row($result)) 
    { 
     print '<tr class="text-data">'; 
     print '<td align="center" valign="top">' . $get_info[0] . '</td>'; 
     print '<td align="left" valign="top"> 
     <a href="edit_Student.php?roll_no=' . $get_info[1] . '" style="color:#000"><b>' . $get_info[1] . '</b></td>'; 
     print '<td align="left" valign="top">'. $get_info[2] . '</td>'; 
     print '<td align="left" valign="top">' . $get_info[3] . '</td>'; 
     print '<td align="center" valign="top">' . $get_info[4] . '</td>'; 
     print '<td align="center" valign="top">' . $get_info[5] . '</td>'; 
     print '</tr>'; 
     //$counter++; 
    } 
} 
else 
{ 
?> 
<tr style="text-align:left;"> 
    <td align="center" colspan="7"> 
     No Student Found ! 
    </td> 
</tr> 
<?php 
} 
?> 
</table>

這是工作對我罰款，並顯示do_search.php頁面上的記錄。當有人輸入表單字段時，我想我的表單沒有提交按鈕選項&輸入卷號它應該在同一頁面上顯示記錄並顯示數據庫中的所有記錄。任何人都可以幫助我這個。在此先感謝

來源

2015-04-04 Majid Ali

標準警告 - 通過不消毒$ _POST輸入來消除注入攻擊，並且mysql_函數已被棄用。除此之外，jQuery可以設置爲偵聽元素。 Google搜索「jquery on」並閱讀。聽你最後的字段模糊，然後谷歌「jquery ajax」並閱讀.ajax方法。他們都有足夠的例子來爲你編寫代碼。 – 2015-04-04 16:53:54

@Majid：jQuery很容易拾起，但我建議學習Javascript。所以，如果你只是想把事情做好，jQuery很容易上手，你可以很容易地實現你想要的東西。當你學習並且陷入困境時，你總是可以在這裏發帖。 – Aravind 2015-04-04 16:54:29

@Aravind我會詳細研究所有的例子。你可以告訴我一個示例代碼，以便查找我想要實現的內容。感謝:) – 2015-04-04 16:57:14

使用Jqyery的keydown（）方法

$("input").keydown(function(){ 
    //Do display logic 
    // Use Ajax and get the data for the value enter and update your html content 
});

http://www.w3schools.com/jquery/event_keydown.asp

來源

2015-04-04 17:01:44

你可以做到這一點與jQuery的阿賈克斯。

<form action="do_search.php" method="post"/> 
Enter Number:<input type="text" name="roll" id="roll"> 
</form>  
<div id="result"></div> 

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
<script type="text/javascript"> 
$("#roll").change(function() { 
     $.post("do_search.php", { roll:$("#roll").val() }) 
    .done(function(data) { 
     $("#result").html(data); 
    }); 
}); 
</script>

來源

2015-04-04 17:05:25 RajeshK

在不刷新頁面的情況下在同一頁面上顯示搜索結果

回答

相關問題