【发布时间】：2020-06-29 09:45:53
【问题描述】：
我们正在使用 JQUERY AJAX 方法为实时搜索和批量更新文件创建网页。这些文件由 index.php（用于显示给用户和 Javascript）和 multiple_update.php（用于批量获取和更新文件）组成。我们得到的初始参考来自here from webslesson website，但它没有任何搜索记录的参考，因此我们为我们的旅程寻求帮助。
下面是我们的 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 可以处理我们的输入，下图是：
--更新-- 下面是错误信息： 错误信息
但是，在我们触发输入之后，我们的 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 移到所有代码的顶部。
以下是网络截图：
After change order of javascript
令人惊讶的是，这很好用：D
【问题讨论】：
-
只是为了添加上下文，您是否启用了错误？你确定你的文件没有错误吗？ （数据库方面）。
-
良好的代码缩进将帮助我们阅读代码，更重要的是它会帮助您调试代码 Take a quick look at a coding standard 为您自己谋福利。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。
-
你的代码容易sql注入使用总是准备好的带参数的语句见stackoverflow.com/questions/60174/…
-
嗨@NadirBaoun，感谢您的回复。我们忘记附上错误，我们将编辑这篇文章以确保更清楚地了解我们的问题。简而言之，是的，有错误，但我仍然不知道下一步该去哪里。
-
谢谢@RiggsFolly，我会检查你的建议，很抱歉这段代码不是标准的完美示例，因为我自学编程。我会尽我所能，一步一步地学习和遵守