Question

在浏览网站时，我发现了一个我喜欢的应用程序中有趣的功能。它就像在同一页面上显示搜索结果而不刷新页面。当某人填写表单的最后一个字段时，它会在同一页面上显示搜索结果而不刷新页面。当某人填写搜索结果的最后一个字段并显示结果时，表单没有提交按钮或任何提交表单数据的链接。我想在我用PHP构建的应用程序中实现此功能。我知道这可以通过Javascript＆amp; amp; Ajax但我对这些语言知之甚少。我刚刚学习了HTML，CSS，PHp＆amp; 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页面上显示记录。我希望我的表单没有提交按钮选项＆amp;当有人进入表单字段输入卷号时，它应该在同一页面上显示记录并显示数据库中的所有记录。任何人都可以帮助我。提前致谢

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>

Answer 2

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

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

2 个答案: