Fatal编程技术网
  • javascript/
  • Javascript 无法显示错误消息"；“未找到结果”；在php中，使用多值进行ajax实时搜索

Javascript 无法显示错误消息"；“未找到结果”；在php中，使用多值进行ajax实时搜索

javascript php html mysql ajax

Javascript 无法显示错误消息"；“未找到结果”；在php中，使用多值进行ajax实时搜索,javascript,php,html,mysql,ajax,Javascript,Php,Html,Mysql,Ajax,我在上一节课上学习了本教程 在我的本地计算机上托管后，一切正常。除非我搜索数据库中不可用的数据，否则我希望得到错误消息“此表上找不到结果”。 请检查代码 您也可以在这里查看演示。“搜索无效值时，未找到结果错误不会弹出 Index.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

我在上一节课上学习了本教程

在我的本地计算机上托管后，一切正常。除非我搜索数据库中不可用的数据，否则我希望得到错误消息“此表上找不到结果”。 请检查代码

您也可以在这里查看演示。“搜索无效值时，未找到结果错误不会弹出

Index.php

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Live Data Search using Multiple Tag in PHP with Ajax</title>  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" />
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
  
  <style>
  .bootstrap-tagsinput {
   width: 100%;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <br />
   <br />
   <br />
   <h2 align="center">Live Data Search using Multiple Tag in PHP with Ajax</h2><br />
   <div class="form-group">
    <div class="row">
     <div class="col-md-10">
      <input type="text" id="tags" class="form-control" data-role="tagsinput" />
     </div>
     <div class="col-md-2">
      <button type="button" name="search" class="btn btn-primary" id="search">Search</button>
     </div>
    </div>
   </div>
   <br />
   <div class="table-responsive">
    <div align="right">
     <p><b>Total Records - <span id="total_records"></span></b></p>
    </div>
    <table class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Customer Name</th>
       <th>Gender</th>
       <th>Address</th>
       <th>City</th>
       <th>Postal Code</th>
       <th>Country</th>
      </tr>
     </thead>
     <tbody>
     </tbody>
    </table>
   </div>
  </div>
  <div style="clear:both"></div>
  <br />
  
  <br />
  <br />
  <br />
 </body>
</html>


<script>
$(document).ready(function(){
 
 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   dataType:"json",
   success:function(data)
   {
    $('#total_records').text(data.length);
    var html = '';
    if(data.length > 0)
    {
     for(var count = 0; count < data.length; count++)
     {
      html += '<tr>';
      html += '<td>'+data[count].CustomerName+'</td>';
      html += '<td>'+data[count].Gender+'</td>';
      html += '<td>'+data[count].Address+'</td>';
      html += '<td>'+data[count].City+'</td>';
      html += '<td>'+data[count].PostalCode+'</td>';
      html += '<td>'+data[count].Country+'</td></tr>';
     }
    }
    else
    {
     html = '<tr><td colspan="5">No Data Found</td></tr>';
    }
    $('tbody').html(html);
   }
  })
 }

 $('#search').click(function(){
  var query = $('#tags').val();
  load_data(query);
 });

});
</script>


在PHP和Ajax中使用多标记进行实时数据搜索
.引导标记输入{
宽度：100%；
}






在PHP和Ajax中使用多个标记进行实时数据搜索

搜寻


总记录-

客户名称
性别
地址
城市
邮政编码
国家








$（文档）.ready（函数（）{
加载_数据（）；
函数加载\u数据（查询）
{
$.ajax({
url:“fetch.php”，
方法：“张贴”，
数据：{query:query}，
数据类型：“json”，
成功：功能（数据）
{
$（“#总记录”）.text（data.length）；
var html=''；
如果（data.length>0）
{
对于（var count=0；count
Fetch.php

    <?php

//fetch.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

$output = '';

$query = '';

if(isset($_POST["query"]))
{
 $search = str_replace(",", "|", $_POST["query"]);
 $query = "
 SELECT * FROM tbl_customer 
 WHERE CustomerName REGEXP '".$search."' 
 OR Address REGEXP '".$search."' 
 OR City REGEXP '".$search."' 
 OR PostalCode REGEXP '".$search."' 
 OR Country REGEXP '".$search."'
 ";
}
else
{
 $query = "
 SELECT * FROM tbl_customer ORDER BY CustomerID
 ";
}

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

while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
 $data[] = $row;
}

echo json_encode($data);

?>

作为将来的参考，我的答案出现在多个注释行中：

在Fetch.php中，变量$data仅在找到一个或多个答案时存在。
否则，var$数据在最后一行仍然不存在：json_encode（$data）；
如果您有错误报告，它会给您一条关于“X行未定义的var数据”的消息

PHP将原谅您，并假设$data的值为NULL；因此您将得到一个json_编码的表单或NULL

因此，如果将Fetch.php放在顶部，它将始终存在，并且是一个空数组或填充数组

这将避免Javascript中无法读取NULL长度的错误。

但是，空数组的长度为0。
如果在浏览器控制台中进行检查，可能会得到
未捕获的类型错误：无法读取null的属性“length”
。因为没有结果，所以您正试图打印
$（'#total_records'）。text（data.length）；
将该部分放入
If（data.length）中…
和see onces是的，你是对的，在我的浏览器中看到了不正确的类型错误。你能帮助我如何放置那一行吗。我仍然没有通过放置.if（data.length>0）$（'#total_records'）.text（data.length）；放置在fetch.php$data=[]的顶部来进入；因此此变量始终存在。当未找到匹配结果时，将返回到您的JavaScriptThank@IvoP。它可以工作，但不会在html表下显示错误消息。实际上，{html='No Data Found'；}仍然不起作用。知道吗？检查
Data
在成功函数中有什么，例如：
警报（数据）