PHP+JQuery Ajax请求异常：控制台无输出或仅获单条数据，需追加至datalist

我帮你梳理下代码里的问题，一步步解决这两个困扰你的问题：

一、PHP代码的问题修复 #

首先你的PHP代码有两个关键问题：SQL语法错误，以及严重的SQL注入风险，同时也没处理空输入的情况，这些都会导致数据返回异常。

修复后的PHP代码 #

<?php
// 确保$read_info是有效的数据库连接
global $ajax_recieve;
$ajax_recieve = '';
if(isset($_POST['values'])){
    $ajax_recieve = trim($_POST['values']);
}

$resultSet = array();
// 仅当输入不为空时查询数据库
if(!empty($ajax_recieve)){
    // 使用预处理语句防止SQL注入，同时修正语法错误
    $stmt = mysqli_prepare($read_info, "SELECT Namn FROM information WHERE Namn LIKE ?");
    // 拼接模糊查询的参数
    $searchTerm = $ajax_recieve . '%';
    mysqli_stmt_bind_param($stmt, "s", $searchTerm);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    
    while($row = mysqli_fetch_array($result)){
        $resultSet[] = array('Name'=> $row['Namn']);
    }
    mysqli_stmt_close($stmt);
}

$json = json_encode($resultSet);
echo $json;
?>

修改说明： #

• 修正了SQL语句的括号错误：原代码里LIKE ('".$ajax_recieve.'%')多了一个左括号，而且直接拼接用户输入会导致SQL注入，改用预处理语句更安全。
• 增加了空输入判断，避免不必要的数据库查询。
• 规范了变量初始化，防止未定义变量的警告。

二、JS代码的问题修复 #

你的JS代码有几个细节错误，导致console.log无输出、数据追加异常：

修复后的JS代码 #

$(document).ready(function(){ 
    $('#search').on('input', function() { 
        var inputSearch = $(this).val().trim(); // 用$(this)更简洁，同时去除首尾空格
        $('#json_datalist').empty(); // 每次输入前清空旧选项，避免重复追加
        
        // 如果输入为空，直接返回，不发送AJAX请求
        if(inputSearch === ''){
            return;
        }
        
        $.ajax({ 
            type: "POST", 
            // 注释掉contentType，因为我们发送的是表单数据，默认就是application/x-www-form-urlencoded
            // contentType: "application/json; charset=utf-8", 
            dataType: 'json', // 修正拼写错误：datatype → dataType
            url: "createJSON_list.php", 
            data: {values: inputSearch}, 
            success: function(response){ 
                console.log('返回的数据：', response); // 这里可以正常输出完整的响应数组
                // 正确遍历响应数组
                $.each(response, function(index, item){ 
                    // 向datalist追加<option>元素，datalist需要<option>才能正常显示
                    $('#json_datalist').append('<option value="' + item.Name + '">');
                }); 
            },
            // 增加错误处理，方便排查问题
            error: function(xhr, status, error){
                console.log('AJAX请求错误：', error);
            }
        }); 
    }); 
});

修改说明： #

• 修正了datatype的拼写错误，应该是dataType（大写T），否则jQuery无法正确识别返回的JSON格式，导致response不是数组，console.log自然无输出。
• 移除了contentType: "application/json; charset=utf-8"，因为我们发送的是表单格式的数据（data: {values: inputSearch}），如果设置成json格式，PHP的$_POST无法获取到参数，这也是数据返回空的原因之一。
• 每次输入前先清空#json_datalist的旧内容，避免重复追加数据。
• 遍历数组时使用$.each(response, function(index, item)，正确获取每个元素的Name值，并且追加<option>标签（datalist必须通过来展示选项）。
• 增加了错误处理函数，方便排查AJAX请求失败的问题。
• 用$(this).val()替代重复的$('#search').val()，代码更简洁。

三、验证效果 #

修改完成后，你可以：

1. 在输入框中输入内容，打开浏览器控制台（F12），查看console.log('返回的数据：', response)是否输出完整的数组。
2. 检查页面上的<datalist id="json_datalist">是否正确追加了所有匹配的选项。

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