Question

我有多个div，显示/隐藏按钮单击div，在其中一个div中我有一个表并过滤此表以搜索特定用户我使用PHP代码和提交表单问题是在提交后表单页面刷新，第一个div出现，虽然请求有效，当我重新访问表格div时，会出现过滤。我使用此代码停止刷新，但表单未提交：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {

  $('#myform').on('submit', function (e) {

    e.preventDefault();

    $.ajax({
      type: 'post',
      url: 'admin.php',
      data: $('#myform').serialize(),
      success: function () {
        alert('table is filtered');
      }
    });

  });

});
</script>

这是我的表格：

<div class="in5 n5" id="users">
    <br>
    <form method="post" action="" id="myform" >
        <table style="width:25%;height: 13%;table-layout: fixed;  font-family: signika;background-color:white;color:white;border-bottom:1px solid white;">
            <tr>
                <td width="30%" style="text-align:center;">
                    <button style="width:100%;height: 100%;border:0; font-size: 20px;font-family: signika;background: transparent;">Show all</button>
                </td>
                <td>
                    <div style="height:100%;width: 100%;"> 
                        <input type="text" name="valueToSearch" placeholder="Search user" style="height:100%;width: 70%; font-size: 20px;" >
                        <input value="Search" id="search"  name="search" type="submit" style="width:30%; height: 100%; float: right; background-color: gray; color:white; font-size: 20px; "> 
                    </div>
                </td>
            </tr>
        </table>

        <table style="width:100%;height:10%; background-color: white; font-size: 20px; border-bottom: 1px solid #cccccc; table-layout: fixed;border-collapse: collapse;">
            <tr>
                <td style="width:3%;">ID</td>
                <td style="width:10%;">Username</td>
                <td style="width:10%;">Email</td>
                <td style="width:10%;">First name</td>
                <td style="width:10%;">Last name</td>
                <td style="width:5%;">Gender</td>
                <td style="width:10%;">Birthday</td>
                <td style="width:8%;">Country</td>
                <td style="width:7%;">City</td>
                <td style="width:10%;">Bio</td>
                <td style="width:5%;">Access</td>
                <td style="width:7%;">Picture</td>
                <td style="width:5%;">Ban user</td>
            </tr>
            <?php while($row = mysqli_fetch_array($search_result)):?>
            <tr >
                <td style="width:3%; overflow: hidden;"  title="<?php echo $row[0]; ?>">
                    <input style="border:0;background: transparent; font-size: 20px;" readonly="readonly" name="id" value="<?php echo $row[0]; ?>">
                </td>
                <td style="width:10%; overflow: hidden;" title="<?php echo $row[1]; ?>"><?php echo $row[1]; ?></td>
                <td style="width:10%; overflow: hidden;" title="<?php echo $row[2]; ?>"><?php echo $row[2]; ?></td>
                <td style="width:10%; overflow: hidden;"title="<?php echo $row[4]; ?>"><?php echo $row[4]; ?></td>
                <td style="width:10%; overflow: hidden;"title="<?php echo $row[5]; ?>"><?php echo $row[5]; ?></td>
                <td style="width:5%; overflow: hidden;"title="<?php echo $row[6]; ?>"><?php echo $row[6]; ?></td>
                <td style="width:10%; overflow: hidden;"title="<?php echo $row[7]; ?>"><?php echo $row[7]; ?></td>
                <td style="width:8%; overflow: hidden;"title="<?php echo $row[8]; ?>"><?php echo $row[8]; ?></td>
                <td style="width:7%; overflow: hidden;"title="<?php echo $row[9]; ?>"><?php echo $row[9]; ?></td>
                <td style="width:10%; overflow: hidden;"title="<?php echo $row[11]; ?>"><?php echo $row[11]; ?></td>
                <td style="width:5%; overflow: hidden;">
                    <?php if($row['12']=="moderate"){ ?>
                        <a href="lock.php?id=<?php echo $row[0]; ?>">
                            <img class="img2" src="icons/access.png" ></a> 
                    <?php } else{ ?> 
                        <a href="access.php?id=<?php echo $row[0]; ?>">
                            <img class="img2" src="icons/locked.png" >
                    </a> <?php } ?> 
                </td>
                <td style="width:7%; overflow: hidden;">
                    <a href="#image" title="See profile picture"   class="cover" >
                        <?php  if($row[10]==""){ ?> 
                            <img class="cimg2 " src="images/profile.png"> <?php 
                        } else { ?>
                            <img class="cimg2 " src="img/<?php echo  $row[10] ?>" >
                        <?php }?> 
                    </a>
                </td>
                <td style="width:5%; overflow: hidden;">
                    <a  title="Delete user" href="deleteuser.php?id=<?php echo $row[0]; ?>"  style="border:0;background: transparent;">
                        <img src="icons/ban.png"></a></td>
            </tr> 
            <?php endwhile;?>
        </table>
    </form>

和PHP代码：

<?
if(isset($_POST['search']))
{
  $valueToSearch = $_POST['valueToSearch'];
  // search in all table columns
  // using concat mysql function
  $query = "SELECT * FROM `r` WHERE CONCAT(`id`, `username`,`email`) LIKE '%".$valueToSearch."%'";
  $search_result = filterTable($query);
}
else {
  $query = "SELECT * FROM `r`";
  $search_result = filterTable($query);
}

// function to connect and execute the query
function filterTable($query)
{
  $connect = mysqli_connect("localhost", "root", "", "x");
  $filter_Result = mysqli_query($connect, $query);
  return $filter_Result;
}

问题是提交页面没有刷新并且出现警报但是表格也没有过滤。

Answer 1

使用点击而非提交和输入类型按钮

    $('#myform').on('click', function (e) {

Answer 2

糟糕！你也错过了一个概念！使用ajax时，您需要自行操作 DOM（文档对象模型） 回调函数

您在提交事件结束时缺少 return false; 。自定义表单提交事件并使用 e.preventDefault（）时，您的实现将覆盖默认行为，因此需要告知表单是否需要提交整个页面。

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    $(function () {

        $('#myform').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'admin.php',
            data: $('#myform').serialize(),
            success: function () {
//filter the table using javascript code by changing the elements etc.
              alert('table is filtered');
            }
          });
    return false;
        });

    });
    </script>

如果这不起作用，那么必定存在一些不确定性，例如可能存在**运行时错误**，这会阻止脚本传播。

提交表单而不刷新页面

2 个答案: