javascript - 在同一页面显示搜索结果，无需刷新页面

Question

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

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