AJAX 响应未被 PHP 文件捕获

Question

我们正在使用 JQUERY AJAX 方法批量创建 web 页面以进行实时搜索和更新文件。 这些文件由 index.php（用于显示给用户和 Javascript）和 multiple_update.php（用于批量获取和更新文件）组成。 我们得到的初步参考来自webslesson网站，但它没有任何搜索记录的参考，因此我们为我们的旅程寻求帮助。

下面是我们的index.php文件

<div class="content-wrapper">
    <div class="content-heading">
        <div>STO Monitoring<small>Tables, one step forward.</small></div>
        <div class="ml-auto"><input type="text" id="search" placeholder="Search" /></div>
        <div id="display"></div>
        <div class="ml-auto">
            <button class="btn btn-primary btn-lg" type="button" data-toggle="modal" data-target="#myModalSmall"><i class="fas fa-plus-square"></i> Add Record</button>
        </div>
    </div>
    <form method="post" id="update_form">
        <div class="card">
            <div class="card-body">
                <table class="display" id="example" style="width:100%">
                    <thead>
                       <tr>
                          <th width="3%"></th>
                          <th width="5%">No</th>
                          <th width="15%">STO</th>
                          <th width="20%">PN</th>
                          <th width="8%">Qty</th>
                          <th width="10%">From</th>
                          <th width="10%">Dest</th>
                          <th width="15%">Status</th>
                          <th width="14%">Remark</th>
                       </tr>
                    </thead>
                    <tbody></tbody>
                 </table>
                 <div align="left">
                    <input type="submit" name="multiple_update" id="multiple_update" class="btn btn-info" value="Multiple Update" />
                </div>
              </div>
           </div>
        </form>
    </div>
 .....

下面是我们 index.php 中的脚本，我们怀疑目前需要排除故障。

<script>
function fill(Value) {
    $('#search').val(Value);
    if (name == "") {
        $("#display").html("");
    }
}

$(document).ready(function(){  

    function fetch_data()
    {
        $("#search").keyup(function() {
            var name = $('#search').val();
            if (name == "") {
                //Assigning empty value to "display" div in "search.php" file.
                $("#display").html("empty");
            } else {
                $.ajax({
                    url:"multiple_select.php",
                    method:"POST",
                    dataType:"json",
                    data: {
                       //Assigning value of "name" into "search" variable.
                       search: name
                    },
                    success:function(data)
                    {
                        var html = '';
                        for(var count = 0; count < data.length; count++) {
                            html += '<tr>';
                            html += '<td><input type="checkbox" id="'+data[count].num+'" data-num="'+data[count].num+'" data-sto="'+data[count].sto+'" data-pn="'+data[count].pn+'" data-qty="'+data[count].qty+'" data-supplant="'+data[count].supplant+'" data-dest="'+data[count].dest+'" data-stat="'+data[count].stat+'" data-remark="'+data[count].remark+'" class="check_box"  /></td>';
                            html += '<td>'+(count+1)+'</td>';
                            html += '<td>'+data[count].sto+'</td>';
                            html += '<td>'+data[count].pn+'</td>';
                            html += '<td>'+data[count].qty+'</td>';
                            html += '<td><span class="btn btn-oval btn-primary">'+data[count].supplant+'</span></td>';
                            html += '<td><span class="btn btn-oval btn-warning">'+data[count].dest+'</span></td>';
                            html += '<td>'+data[count].stat+'</td>';
                            html += '<td>'+data[count].remark+'</td></tr>';
                        }
                        $('tbody').html(html);
                    }
                });
            }
        });
    }

fetch_data();

$(document).on('click', '.check_box', function(){
 .....
</script>

我们修改AJAX看看输入是否能被网络捕获，下面是multiple_update的代码。php

<?php

include('multiple_connection.php');
$name = $_POST['search'];
echo $name;

$query = "SELECT * FROM matreq_list, sto_list WHERE matreq_list.sto = sto_list.sto AND sto_list.sto LIKE '%$name%' LIMIT 5;

$statement = $connect->prepare($query);

if($statement->execute()) {
    while($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }
    echo json_encode($data);
}
?>

我们希望通过 AJAX 捕获每个搜索，并且来自网络的响应将实时反映在我们的索引文件中。 以下是我们预期的最终结果（此结果在 mysql 语句中没有“LIKE”，仅显示结果）：

我们确认 AJAX 可以处理我们的输入，下图是：

--UPDATE-- 下面是错误信息： 错误信息

然而，在我们触发输入之后，我们的 index.php 文件中没有出现任何内容。 网络显示响应良好，但 HTML 没有按照我们预期的方式响应。 先生，请告诉我们，我们的方法有什么问题，我们应该解决什么问题？

谢谢您，感谢您对我们案件的帮助

=====更新=====

2020-07-02：正如 Nadir Baoun 先生所说，试图更改 jquery.js 的顺序并将其放在 bootstrap.js 之上，不知何故我的表格现在能够搜索部分或全部数据。

前：

.....
 <script src="vendor/datatables.net/js/jquery.dataTables.js"></script>
 <script src="vendor/datatables.net-bs4/js/dataTables.bootstrap4.js"></script>
 <script src="vendor/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
 <script src="vendor/jquery/dist/jquery3.5.1.js"></script>
 <script src="vendor/datatables.net/dist/js/jquery.dataTables.min.js"></script>

订购后：我将 jquery 移动到所有代码的顶部。

以下是网络截图：

javascript 更改顺序后

令人惊讶的是，这很好用：D

Answer 1

HTML 没有以您想要的方式响应是因为您有 JavaScript 错误，因此您的响应代码不会相应地 function。 首先在引导之前包括您的 jquery 文件。 这应该解决“无法读取未定义的属性 fn”错误。 请在完成我上面提到的操作后，在您的 ajax 请求的成功参数中使用调试消息更新您的帖子

Answer 2

在 Nadir Baoun 先生的指导下彻底阅读了各种文章后，我的问题现在通过更改脚本的顺序得到解决，将 jquery 脚本放在引导脚本之前。

类似的答案也发布在 stackoverflow 网站上： script order for jquery with bootstrap

谢谢：）