1. 警告：无效的 JSON 响应

DataTables 发出“无效 JSON 响应”的警告是 DataTables 最常见的错误之一。幸运的是，使用现代网络浏览器中内置的开发人员工具，诊断错误发生的原因相当容易。本指南将确切说明错误的含义、如何诊断问题以及如何解决问题。

含义

通过 Ajax（ajax）加载数据时，DataTables 默认情况下希望加载的数据是有效的 JSON。JSON 是一种数据交换格式，因其与 Javascript 的兼容性、易用性和易于人类读取，已广泛应用于网络上。但是，与所有数据交换格式一样，它对什么是有效的 JSON 有严格的规则。任何不符合此标准的内容都是无效的 JSON，并且将在 DataTables 期望得到 JSON 的地方引发错误。

当 DataTables 显示消息时

DataTables 警告：表格 id={id} - 无效的 JSON 响应。

它的意思正如其所说的那样。DataTables 向服务器发出了 Ajax 响应以获取 JSON 数据，但收到的数据不是有效的 JSON。

诊断

如果服务器没有使用有效的 JSON 数据响应 Ajax 请求，我们需要知道它响应的内容，以便我们可以采取纠正措施。通常，响应将包含服务器上用于创建 JSON 的程序中的错误消息，这将是完全解决问题的起点。

服务器数据

现代浏览器都自带内置的开发者工具，该工具可用于找出服务器响应 DataTables Ajax 请求的数据。以下列出了有关如何使用浏览器执行此操作的说明。

Safari

1. Safari 默认情况下会隐藏其内置的开发者工具。如果您在 Safari 中没有看到显示的 开发 菜单，则需要启用它。如果您看到，请跳到步骤 3。
   • 打开 Safari 菜单并选择 首选项...
2. 在 高级 选项卡中启用开发者菜单
   • 单击首选项窗口中的 高级 选项卡
   • 选中 在菜单栏中显示“开发”菜单 选项的框
   • 关闭首选项 - 现在将显示 开发 菜单
3. 查看页面加载的资源
   • 从 开发 菜单中选择 显示页面资源 选项。
   • 开发者控制台将显示在页面底部
   • 重新加载页面以便 Safari 可以捕获所有网络请求
4. 将显示 Ajax 请求的详细信息。
   • Safari 将显示已为页面加载的所有资源（图像、脚本等）的列表。找到已向服务器发出的 Ajax 请求并单击它。Safari 将显示有关该请求的详细信息。
   • 请注意，对于拥有大量资源的页面，Safari 会按类型将资源分组到文件夹中。如果您的网站上发生这种情况，请查找 Ajax 请求的“XHR”文件夹。

请注意，这些说明是根据使用的 Safari 7 版本编写的。较新版本可能略有不同。

Chrome

1. 若要访问 Chrome 中的开发者工具
   • Mac：访问 视图 > 开发人员 > 开发人员工具 菜单选项。
   • Windows：单击 Chrome 菜单（在地址栏右侧）并选择 工具 > 开发人员工具。
2. 开发者工具 会显示在当前浏览器窗口的底部。Chrome 默认显示 Javascript 控制台。
   • 单击 网络 选项卡以查看网络请求
   • 刷新页面以允许 Chrome 捕获所有请求
3. 网络面板将显示 Chrome 发出的所有加载页面请求。
   • 单击窗口底部的 XHR 选项以将请求缩小为 Ajax（XHR）请求。
   • 双击 DataTables 发出的 Ajax 请求
4. 将显示 Ajax 请求的详细信息。
   • 单击 Ajax 视图中的 响应 选项卡以查看从服务器返回的确切数据。这就是我们感兴趣的内容！

请注意，这些说明是根据使用的 Chrome 31 Mac 版本编写的。较新版本或不同平台上的版本可能略有不同。

Firefox

1. 如何获取Firefox的开发者工具
   • Mac：访问“工具>Web开发人员>网络”菜单选项。
   • Windows：点击Firefox菜单（窗口左上角），选择“Web开发人员网络”选项。
2. “开发者工具”显示在当前浏览窗口的底部。
   • 刷新页面以允许Firefox捕获所有请求
3. 网络面板将显示Firefox为加载页面所作的所有请求。
   • 单击窗口底部的 XHR 选项以将请求缩小为 Ajax（XHR）请求。
   • 双击 DataTables 发出的 Ajax 请求
4. 将显示 Ajax 请求的详细信息。
   • 在Ajax视图中点击“响应”选项卡，以查看从服务器返回的确切数据。这就是我们感兴趣的内容！

请注意，此说明以Firefox 26 Windows版为准。较新版本或者不同平台的版本可能略有不同。

IE

1. 如何获取IE的开发者工具
   • 按F12或,
   • 点击工具菜单（右上角齿轮图标），选择“F12开发者工具”选项。
2. “开发者工具”显示在当前浏览窗口的底部。IE默认显示文档树。
   • 单击 网络 选项卡以查看网络请求
3. IE需要专门跟踪网络流量，这就是我们现在要做的。
   • 点击“开始捕获”按钮以捕获网络请求
   • 刷新页面以允许IE捕获所有请求
4. 网络面板将显示IE为加载页面所作的所有请求。
   • 双击DataTables的Ajax请求——它可能在请求列表底部或接近底部
5. 将显示 Ajax 请求的详细信息。
   • 在Ajax视图中点击“响应体”选项卡，以查看从服务器返回的确切数据。这就是我们感兴趣的内容！

请注意，此说明以IE 10版为准。较新版本可能略有不同。

Opera

1. 如何获取Opera的开发者工具
   • Mac：右键点击或ctrl点击文档，选择“检查元素”选项。
   • Windows：右键单击文档，然后选择检查元素选项。
2. 开发者工具显示在当前浏览器窗口的底部。Opera 将显示有关所单击元素的信息。
   • 单击 网络 选项卡以查看网络请求
   • 刷新页面，以允许 Opera 捕获所有请求
3. 网络面板将显示 Opera 加载该页面所发起的全部请求。
   • 单击窗口底部的 XHR 选项以将请求缩小为 Ajax（XHR）请求。
   • 双击 DataTables 发出的 Ajax 请求
4. 将显示 Ajax 请求的详细信息。
   • 在Ajax视图中点击“响应”选项卡，以查看从服务器返回的确切数据。这就是我们感兴趣的内容！

请注意，这些说明是以 Opera 18 Mac 作为所用版本编写的。较新版本或其他平台上的版本可能略有不同。

JSON 验证

从服务器获得 Ajax 数据响应后，你可以利用诸如 JSON Lint 或 JSON Parser 等工具验证 JSON。服务器中的 JSON 响应中的错误往往会很明显，但 JSON Linter 可以帮助解决不太明显的错误，例如尾随逗号。

解决方案

按照上面的说明了解服务器中的数据实际上是什么后，由于这些数据并非 JSON，因此你将能够修改数据或创建数据的程序，以仅返回有效的 JSON。