javascript - 根据搜索条件在 ajax POST 后刷新表

Question

全部，

我有一个模态，其中包含一个表，其中包含使用 PHP include 进行 PHP 查询的结果，问题是当页面首次打开时加载模态，我似乎无法在稍后使用 AJAX 帖子来刷新基于文本框变量的表格。

这是我的代码

HTML

<div class="modal-content">
    <div class="modal-header">
      <span class="close">x</span>
    </div>

    <div class="modal-body">    
        <div id="divSearchResultsTable">
            <table  class="tblSearchResults" id="tblSearchResults">     
                <thead> 
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Home</th>
                    <th>Mobile</th> 
                    <th>City</th>
                    <th>Country</th>
                    <th>Company</th>
                </tr>
                </thead>
                <tbody>
                    <?php
                        include("sql_search.php");
                    ?>
                <tbody>
            </table>
        </div>
        <div id="divSearchResultsButtons">
            <input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/>
            &nbsp
            <input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/>
        </div>
</div>
</div>

JavaScript

$(function(){
    $('#btnSearch').click(function(e){
        var modal = document.getElementById('modal');
        var value = $("#txtSearch").val();
                $.ajax({
                    type : "POST",
                    url : "sql_search.php",                 
                    data : {value:value},
                    success : function(output) {
                    alert(output);
                        modal.style.display = 'block';
                        modal.focus();
                    }
                });
    });
});

PHP(sql_search.php)

$value = (isset($_POST['value']) ? $_POST['value'] : null);

if ($value == null){
$sql = "SELECT * FROM helpdesk";
}

else{
$sql = "SELECT * FROM helpdesk WHERE ID = $value";
}

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

while( $row = mysqli_fetch_array($result))
{   
    echo '<tr>';
    echo '<td>'.$row['ID'].'</td>' . '<td>'.date("d/m/Y g:i:s A", strtotime($row['DateCreated'])).'</td>' . '<td>'.$row['Priority'].'</td>' . '<td>'.$row['Company'].'</td>' . '<td>'.$row['Name'].'</td>' . '<td>'.$row['Subject'].'</td>' . '<td>'.$row['Name'].'</td>';
    echo '</tr>';
}

我得到的结果是返回的每个数据库项目。我在 AJAX 成功中使用了 alert(output) 来确认变量确实被传递，所以我想我现在只需要弄清楚如何更新表。

有什么建议吗？

谢谢

Answer 1

不要将 PHP 文件包含在 html 中，而是为您想要输出的元素分配一个 id。然后在 Javacsript 中，使用 AJAX 调用返回的数据填充内容。

<div class="modal-content">
    <div class="modal-header">
      <span class="close">x</span>
    </div>

    <div class="modal-body">    
        <div id="divSearchResultsTable">
            <table  class="tblSearchResults" id="tblSearchResults">     
                <thead> 
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Home</th>
                    <th>Mobile</th> 
                    <th>City</th>
                    <th>Country</th>
                    <th>Company</th>
                </tr>
                </thead>
                <tbody id="modalContent">
                    <!--  note, no content and tbody has an ID -->
                <tbody>
            </table>
        </div>
        <div id="divSearchResultsButtons">
            <input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/>
            &nbsp
            <input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/>
        </div>
</div>
</div>

以及 JavaScript 代码:

$(function(){
    $('#btnSearch').click(function(e){
        var modal = document.getElementById('modal');
        var value = $("#txtSearch").val();
                $.ajax({
                    type : "POST",
                    url : "sql_search.php",                 
                    data : {value:value},
                    success : function(output) {
                    alert(output);
                        $('#modalContent').html(output);  // <------
                        modal.style.display = 'block';
                        modal.focus();
                    }
                });
    });
});

顺便说一句，您的 PHP 代码是不安全的，因为它直接在 SQL 查询中使用其参数，而无需验证或类型转换(SQL 注入(inject))，并且从数据库输出数据而不转义 html(存储的 HTML/Javascript 注入(inject))。考虑使用带参数的 PDO - http://php.net/manual/en/pdostatement.bindparam.php并将数据库输出值包装到 htmlspecialchars() 调用中