PHP环境下获取输入框值传入AJAX函数失败，求排查方案

基于AJAX数据库示例（运行环境：CentOS 7、PHP 7.4），原示例通过下拉选框onchange事件实现功能，尝试改为从输入框获取值传入showCustomer AJAX函数时，以下两种写法均失败：

失败的HTML写法 #

<div style="float: left; text-align: center;">
    <input type="text" placeholder="Type something..." name="myInput" id="myInput">
    <button type="submit" onclick="showCustomer(<?php echo $_GET['myInput'] ?>)">Test from myInput HTML</button>
</div>
<div id="txtCustomer"> </div>

失败的PHP写法 #

echo "<div style=\"float: left; text-align: center;\">
          <input type=\"text\" placeholder=\"Type something...\" name=\"myInput\" id=\"myInput\">
          <button type=\"submit\" onclick=\"showCustomer(".$_GET['myInput'].")\">Test from myInput PHP</button>
      </div>
      <div id=\"txtCustomer\" style=\"text-align: left; font-size: 14pt;\"> </div>";

但直接传入静态预定义值（如showCustomer('active')）时功能完全正常。

核心错误原因 #

1. 服务器端与客户端逻辑混淆：$_GET['myInput']是PHP服务器端代码，页面加载时就会执行，而输入框的值是用户在页面加载后才输入的，服务器端无法实时获取这个值，导致渲染后的onclick事件参数为空或为旧值。
2. JS语法缺失：就算能拿到值，也没有给字符串参数加引号，JS会将无引号的内容视为变量而非字符串，导致语法错误。

解决建议 #

改用客户端JS在点击按钮时动态获取输入框的值，传入showCustomer函数：

修正后的HTML写法

<div style="float: left; text-align: center;">
    <input type="text" placeholder="Type something..." name="myInput" id="myInput">
    <button type="button" onclick="showCustomer(document.getElementById('myInput').value)">Test from myInput HTML</button>
</div>
<div id="txtCustomer"> </div>

修正后的PHP写法

echo "<div style=\"float: left; text-align: center;\">
          <input type=\"text\" placeholder=\"Type something...\" name=\"myInput\" id=\"myInput\">
          <button type=\"button\" onclick=\"showCustomer(document.getElementById('myInput').value)\">Test from myInput PHP</button>
      </div>
      <div id=\"txtCustomer\" style=\"text-align: left; font-size: 14pt;\"> </div>";

额外注意事项 #

• 把按钮的type="submit"改为type="button"，避免触发表单默认提交行为导致页面刷新，影响AJAX功能。
• 若需要对输入值做合法性校验，可在调用showCustomer前先添加校验逻辑，例如：

  function handleClick() {
      const inputVal = document.getElementById('myInput').value.trim();
      if (inputVal) {
          showCustomer(inputVal);
      } else {
          alert('请输入内容');
      }
  }
  

  然后将按钮的onclick改为onclick="handleClick()"。

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