如何解决jQuery/AJAX请求PHP查询MySQL后填充只读HTML文本框失效的问题

1. JS代码核心问题 #

• 拼写错误：AJAX配置的成功回调函数名拼写错误，你写的是succes，正确拼写为success，这是请求成功后不执行赋值逻辑的最直接原因
• 赋值方法错误：给input文本框赋值不能使用.html()方法，该方法用于设置元素内部HTML内容，input为单标签元素，值存储在value属性中，需要改用.val(result)方法赋值
• 冗余调用：页面加载时调用load_data()没有传参，会无意义发起一次空请求，可直接删除该行调用，或者在函数内加空参数判断，无参数时不发起AJAX请求

2. PHP后端问题 #

• 无返回输出：查询得到结果后没有使用echo输出结果，前端AJAX无法拿到返回数据
• 查询字段错误：你的需求是获取员工姓名，但SQL语句中查询的是id_emp（即你输入的员工ID），需要修改为查询员工姓名对应的字段，比如emp_name（请根据你表的实际字段名调整）
• 存在SQL注入风险：直接将用户输入的参数拼接进SQL语句，安全风险极高，需要使用PDO预处理查询
• 未处理查询为空的情况：如果输入的员工ID不存在，$result变量未定义，会抛出PHP警告，需要设置默认返回值

3. HTML代码问题 #

存在冗余闭合标签：多个</td>前有多余的</span>标签，前面没有对应的<span>开标签，虽然不影响功能，但属于语法不规范，建议删除多余的</span> #

修正后的代码示例 #

修正后的JS代码 #

$(document).ready(function() {
  function load_data(query){
    $.ajax ({
      url: "fetch.php",
      method: "POST",
      data: {query:query},
      success: function (result) // 修正拼写错误
      {
        $('#wb_empname').val(result); // 修正赋值方法
      },
      error: function() {
        alert('There was some error performing the AJAX call!');
      }
    });
  }

  $("#wb_name").on('keyup',function(event) {
    if (event.key === "Enter") {
      var search= $(this).val().trim(); // 新增trim过滤首尾空格
      if(search != ''){
        load_data(search);
      }else{
        $('#wb_empname').val(''); // 输入为空时清空姓名框
      }
    }
  });
});

修正后的fetch.php代码 #

<?php
$result = ''; // 初始化默认返回值
if(isset($_POST["query"])){
  $q = trim($_POST["query"]);
  try {
    $dbh = new PDO('mysql:host=localhost;dbname=myhris43_test;charset=utf8', 'root', 'bvgtxpkrf7');
    // 使用预处理查询避免SQL注入
    $stmt = $dbh->prepare("SELECT emp_name from tblemployee where id_emp = ?"); // 把emp_name替换为你表中员工姓名的实际字段名
    $stmt->execute([$q]);
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    if($row){
      $result = $row['emp_name']; // 对应调整字段名
    }else{
      $result = '员工不存在';
    }
    $dbh = null;
  } catch (PDOException $e) {
    $result = '查询错误';
  }
}
echo $result; // 输出结果返回给前端
?>

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