排序和搜索的jQuery Datatables间歇性问题答案

【问题标题】：jQuery Datatables Intermittent issue with sort and search排序和搜索的jQuery Datatables间歇性问题
【发布时间】：2021-08-30 22:45:15
【问题描述】：

晚上好，

我在排序或搜索时遇到了一个奇怪的间歇性错误：SyntaxError: Unexpected end of JSON input

该错误是由于返回的 JSON 字符串为空引起的。但是，此问题仅在排序或搜索时不时发生。（通常是我们输入太快或者在排序列上点击了几次。）

重要提示：此错误似乎只发生在托管环境中。一切都在 localhost 环境中运行。

数据表服务器端：https://pastebin.com/RiDdZLV1

型号：

<?php
  ini_set('error_reporting', E_ALL);
  ini_set("log_errors", 1);
  ini_set("error_log", __DIR__."/errors.log");
  
  require(__DIR__."/Database/Conn.php");
  require(__DIR__."/Database/ServerDataTables.php");
  
  echo json_encode(
      SSP::complex( 
          $_POST, 
          "ws_persons", 
          "reservation_id", 
          array(
              array( 'db' => 'reservation_id', 'dt' => 0 ),
              array( 'db' => 'reservation_id', 'dt' => 1 ),
              array( 'db' => 'firstname', 'dt' => 2 ),
              array( 'db' => 'lastname','dt' => 3 ),
              array( 'db' => 'death_place', 'dt' => 4 ),
          ),
          "is_vet = 1", 
          null)
    );
?>

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <link href="/assets/css/app.min.css" rel="stylesheet" type="text/css" />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
          
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css"/>
         
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>

</head>
<body>
    
<script>

  $(function() {

   
    $('#resTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
          "url": "Model/DB_Reservations.php",
          "type": "POST",
          "data": {
              action: "loadAllRes",
          },
          "error": function (xhr, error, code){
            console.log(error);
            console.log(code);
            console.log(xhr);
          },
        }
    });
  });


</script>

<table id="resTable" class="table dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
    <tr>
        <th></th>
        <th>Reservation #</th>
        <th>Veteran</th>
        <th>Location</th>
        <th>Date</th>
    </tr>
</thead>
</table>


</body>
</html>

感谢任何帮助。

【问题讨论】：

使用您的浏览器开发工具检查通过 AJAX 调用的 PHP 究竟返回了什么。很可能你有一个警告/通知，它破坏了 json 语法
我验证了控制台和网络响应。没有抛出任何错误

标签： javascript php jquery datatables

【解决方案1】：

经过大量调试，我发现了问题。 Datatables 无法读取数据库中的某些字符。

因此，在 Datatables 服务器端脚本内的连接之后添加 $db->exec("set names utf8"); 解决了我的问题。

https://datatables.net/forums/discussion/21242/invalid-json-response-when-adding-some-utf-8-characters

【讨论】：