javascript - 提交表单，无需刷新并将 mysql 返回的行追加到表中

Question

我似乎无法正确地将服务器返回的所有行附加到表的主体中。这是我的 ajax 代码。 HTML 就在下面。就像我可以看到返回的响应一样，它不仅仅附加到我现有的表中。有人可以帮我解决这个问题吗？我已经尝试了几个小时，今天我必须向我的老板演示它

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('submit', '#formID', function() {
        var data = $(this).serialize();
        $.ajax({
            type : 'POST',
            url  : 'search.php',
            data : data,
            success :  function(data) {
                $('.result').append(data);
            }
        });
        return false;
    });
});
</script>

HTML

<table id="example3" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>***</th>
            <th>Description</th>
            <th>**</th>
            <th>Source</th>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>***</th>
            <th>Description</th>
            <th>**</th>
            <th>Source</th>
            <th></th>
        </tr>
    </tfoot>
    <tbody class="result">

    </tbody>
</table>


<?php


$servername = "*****";
$username = "*****";
$password = "*****";
$dbname = "*****";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}


    $fields = array('*****', '*****', '*****', '*****', '*****');

    $conditions = array();

  foreach($fields as $field){
        // if the field is set and not empty
        if(isset($_POST[$field]) && $_POST[$field] != '') {
            // create a new condition while escaping the value inputed by the user (SQL Injection)
            $conditions[] = "`$field` LIKE '%" . mysqli_real_escape_string($conn,$_POST[$field]) . "%'";
        }
    }


$query = " SELECT * FROM $dbname.***** P ";

            if(count($conditions) >0) {

            $query .= "WHERE " . implode (' AND ', $conditions); // you can change to 'OR', but I suggest to apply the filters cumulative
    }               

    $result = mysqli_query($conn,$query);

if (!$result) {
    echo "ERRORS";
}

    while($row = $result->fetch_assoc())  {
         echo "<tr><td>" .$row['*****'] . "</td><td>*****</td><td>September 12 1993</td><td>*****</td><td>May 24 1998</td><td>May 24 2005</td><td>*****</td><td>*****</td> </tr>";                       

     }



$conn->close();
?>

Answer 1

我想知道你的 serch.php 页面在哪里，你可以在其中发布数据并将响应放入你的 fontend 页面。 索引.php

<table id="example3" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>***</th>
        <th>Description</th>
        <th>**</th>
        <th>Source</th>
        <th></th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>***</th>
        <th>Description</th>
        <th>**</th>
        <th>Source</th>
        <th></th>
    </tr>
</tfoot>
<tbody class="result">

</tbody>

<script type="text/javascript">
$(document).ready(function() {
$(document).on('submit', '#formID', function() {
    var data = $(this).serialize();
    $.ajax({
        type : 'POST',
        url  : 'search.php',
        data : data,
        success :  function(data) {
            $('.result').append(data);
        }
    });
    return false;
 });
 });
</script>

搜索.php

<?php
 $servername = "*****";
 $username = "*****";
 $password = "*****";
 $dbname = "*****";
 $conn = new mysqli($servername, $username, $password, $dbname);
 if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
  }
$fields = array('*****', '*****', '*****', '*****', '*****');

$conditions = array();
foreach($fields as $field){
    // if the field is set and not empty
    if(isset($_POST[$field]) && $_POST[$field] != '') {
        // create a new condition while escaping the value inputed by the user (SQL Injection)
        $conditions[] = "`$field` LIKE '%" . mysqli_real_escape_string($conn,$_POST[$field]) . "%'";
    }
}
$query = " SELECT * FROM $dbname.***** P ";

        if(count($conditions) >0) {

        $query .= "WHERE " . implode (' AND ', $conditions); // you can change to 'OR', but I suggest to apply the filters cumulative
}               

$result = mysqli_query($conn,$query);

 if (!$result) {
    echo "ERRORS";
 }

while($row = $result->fetch_assoc())  {
     echo "<tr><td>" .$row['*****'] . "</td><td>*****</td><td>September 12 1993</td><td>*****</td><td>May 24 1998</td><td>May 24 2005</td><td>*****</td><td>*****</td> </tr>";                       

 }
 $conn->close();
?>