Question

我正在研究基于ajax的html表单，以从数据库中获取一些数据并显示它们。

在我的数据中检索表单的一部分。从数据库中获取的数据不会由ajax代码呈现。提取数据时，由于bg的颜色，我可以看到扩展的div部分，但是没有数据表。

这是我的代码：如何使其工作？

HTML：

  <div id="Browse Record" class="tabcontent">
    <div class="row" id="meta-update">

     <div class="col-sm-6" style="background-color:lavenderblush;">
      <h6> Fields </h6>
     <div id="browse" class="col mb-4"> 

   <div class="records_content">  </div>

</div>
 </div>
</div></div>

JS：

function insertRecord() {
    // get values
        var field_id = $("#field_id").val();
        var description = $("#description").val();
        var corner_points = $("#corner_points").val();
        var dldm = $("#dldm").val();
        var pdm = $("#pdm").val();
        var notes = $("#notes").val();

    // Add record
        $.post("ajax/insertRecord.php", {
        field_id: field_id,
        description: description,
        corner_points: corner_points,
        dldm: dldm,
        pdm: pdm,
        notes: notes

    }, function (data, status) {

    // read records again
        readRecords();

        // clear fields from the popup
        $("#field_id").val("");
        $("#description").val("");
        $("#corner_points").val("");
        $("#dldm").val("");
        $("#pdm").val("");
        $("#notes").val("");

    });
}


// READ records
function readRecords() {
    $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
    });
}

readRecord.php：

<?php


// include Database connection file 
    include("ajax/connection.php");

    // Design initial table header 
    $data = '<table class="table table-bordered table-striped">
                        <tr>
                            <th>Field-ID</th>
                            <th>Description</th>
                            <th>Corner-Points</th>
                            <th>distance_map</th>
                            <th>Piping_map</th>
                            <th>Notes</th>
                        </tr>';

        try {
            $stmt = $conn->prepare("SELECT field_id, description, corner_points, damming_level_distance_map, pipeline_distance_map, notes FROM fields");
            $stmt->execute();

            $stmt->setFetchMode(PDO::FETCH_ASSOC);
            foreach($stmt->fetchAll() as $row) {

                 $data .= '<tr>
                <td style="width:150px;border:1px solid grey;">'.$row['field_id'].'</td>
                <td style="width:150px;border:1px solid grey;">'.$row['description'].'</td>
                <td style="width:150px;border:1px solid grey;">'.$row['corner_points'].'</td>
                <td style="width:150px;border:1px solid grey;">'.$row['damming_level_distance_map'].'</td>
                <td style="width:150px;border:1px solid grey;">'.$row['pipeline_distance_map'].'</td>
                <td style="width:150px;border:1px solid grey;">'.$row['notes'].'</td>

            </tr>';

            }
        }
        catch(PDOException $e) {
            // echo "Error: " . $e->getMessage();
               exit('<b>Catched exception at line '. $e->getLine() .' (code : '. $e->getCode() .') :</b> '. $e->getMessage());

        }

    $data .= '</table>';

    echo $data;
?>

Answer 1

您混合使用的PHP变量错误

我的意思是：
你有这个：
<td style='width:150px;border:1px solid grey;'><?= $row['field_id'] ?></td>
应该是：
<td style='width:150px;border:1px solid grey;'>'.$row['field_id'].'</td>

另一个问题是引号在转义。使用双引号"或\可以防止这种情况：

双引号：
<td style="width:150px;border:1px solid grey;">
单引号转义：
<td style=\'width:150px;border:1px solid grey;\'>

$data .= ''行应以;结尾。

Answer 2

使用以下命令更新PHP foreach循环

foreach($stmt->fetchAll() as $row) 
{

    $data .= '<tr>
        <td style="width:150px;border:1px solid grey;">'. $row['field_id'] .'</td>
        <td style="width:150px;border:1px solid grey;">'. $row['description'] .'</td>
        <td style="width:150px;border:1px solid grey;">'. $row['corner_points'] .'</td>
        <td style="width:150px;border:1px solid grey;">'. $row['damming_level_distance_map'] .'</td>
        <td style="width:150px;border:1px solid grey;">'. $row['pipeline_distance_map'] .'</td>
        <td style="width:150px;border:1px solid grey;">'. $row['notes'] .'</td>                    
    </tr>';

}

Ajax无法动态生成内容

2 个答案: