如何从MySQL数据库取数并用于jQuery UI自动补全功能？

我明白你现在遇到的困扰——想用jQuery UI Autocomplete实现自动补全功能，数据库里明明存着216条行业数据，但后端返回的结果却是null，没法生成可用的JavaScript数组。咱们一步步拆解问题，把它解决掉：

先梳理你的现有代码参考 #

数据表结构

id | industryName
1 | Air Transport
2 | Agriculture
...

autocomplete.php

<div class="ui-widget">
  <label for="industries">Industries: </label>
  <input id="industries">
</div>
<script>
$.ajax({
  url : 'industries.php',
  type : 'GET',
  success : function(data){
    var availableIndustries = jQuery.parseJSON(data);
    $( function() {
      $( "#industries" ).autocomplete({
        source: availableIndustries
      });
    } );
  }
});
</script>

原industries.php（存在问题的版本）

include 'includes/database.php';
$sql = "SELECT * FROM industries";
$result= $conn->query($sql);
echo json_encode($result);

问题根源与修正方案 #

你遇到的核心问题是：直接对数据库查询返回的结果集对象执行json_encode，PHP无法将这个对象序列化为有效的JSON，所以返回了null。我们需要先把结果集转换成包含行业名称的数组，再输出JSON。

1. 修正后的industries.php

<?php
include 'includes/database.php';

// 只查询需要的字段，减少数据传输，提升性能
$sql = "SELECT industryName FROM industries";
$result = $conn->query($sql);

$industries = [];
if ($result->num_rows > 0) {
    // 循环读取每一行数据，提取需要的行业名称存入数组
    while($row = $result->fetch_assoc()) {
        $industries[] = $row['industryName'];
    }
}

// 设置响应头，明确告诉前端返回的是JSON格式数据
header('Content-Type: application/json');
// 输出格式化后的JSON数组
echo json_encode($industries);
?>

2. 优化autocomplete.php（可选）

可以给AJAX请求加上dataType: 'json'，让jQuery自动帮你解析JSON数据，省去手动调用jQuery.parseJSON(data)的步骤：

<div class="ui-widget">
  <label for="industries">Industries: </label>
  <input id="industries">
</div>
<script>
$.ajax({
  url : 'industries.php',
  type : 'GET',
  dataType: 'json', // 自动解析JSON响应
  success : function(availableIndustries){
    $( function() {
      $( "#industries" ).autocomplete({
        source: availableIndustries
      });
    } );
  },
  error: function(xhr, status, error) {
    // 可选：添加错误处理，方便调试问题
    console.error('获取行业数据失败:', error);
  }
});
</script>

为什么这样能解决问题？ #

• 数据库查询返回的$result是一个结果集对象，不是直接可序列化的数组，直接json_encode会得到null；
• 修正后通过fetch_assoc()循环读取每一行数据，把需要的industryName字段提取出来组成数组，再序列化这个数组，就能得到Autocomplete需要的字符串数组；
• 设置Content-Type: application/json可以避免前端在解析数据时出现意外格式问题。

内容的提问来源于stack exchange，提问作者user45678