在同一页面上显示搜索结果而不刷新页面答案

【问题标题】：Displaying search result on same page without refreshing the page在同一页面上显示搜索结果而不刷新页面
【发布时间】：2015-04-04 16:45:29
【问题描述】：

在浏览网站时，我发现我喜欢在我的应用程序中拥有一个有趣的功能。它就像在同一页面上显示搜索结果而不刷新页面一样。当有人填写表单的最后一个字段时，它会在同一页面上显示搜索结果而不刷新页面。当有人填写最后一个字段时，表单没有提交按钮或任何链接来提交表单数据它搜索结果并显示结果.我想在我用 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 页面上显示记录。我希望我的表单没有提交按钮选项，当有人输入表单字段输入卷号时，它应该在同一页面上显示记录并显示数据库中的所有记录。任何人都可以帮我解决这个问题。提前致谢

【问题讨论】：

标准警告 - 您会因为不清理 $_POST 输入而让自己容易受到注入攻击，并且 mysql_ 函数已被弃用。除此之外，jQuery 可以设置为监听元素。谷歌搜索“jquery on”并阅读。听你的最后一个字段模糊，然后谷歌“jquery ajax”并阅读 .ajax 方法。它们都提供了足够的示例来为您编写代码。
@Majid：jQuery 很容易上手，但我建议学习 Javascript。所以，如果你只是想把事情做好，jQuery 很容易上手，你可以用它轻松实现你想要的。当您学习并遇到问题时，您可以随时在此处发帖。
@Aravind 我将详细研究所有示例。你能告诉我一个示例代码来搜索我想要实现的目标吗？谢谢:)
@MajidAli：这些将帮助您：api.jquery.com/change、api.jquery.com/jquery.ajax 和 api.jquery.com/html。有了这三个，你就可以完成你想做的功能了。
见jqueryui.com/autocomplete，twitter.github.io/typeahead.js/examples

标签： javascript jquery mysql ajax

【解决方案1】：

您可以使用 jQuery ajax 做到这一点。

<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>

【讨论】：

【解决方案2】：

使用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

【讨论】：