如何在jQuery $.getJSON请求中获取用户输入并传递参数？

没问题！其实用jQuery获取用户输入比原生JS更简洁，我来一步步帮你改造代码，让它支持用户自定义输入：

第一步：准备HTML输入控件 #

先在页面里加一个输入框和触发查询的按钮，方便用户输入和提交：

<input type="text" id="schemaInput" placeholder="请输入schema名称，比如 sewer_pipelines">
<button id="queryBtn">获取数据</button>

第二步：用jQuery获取输入值并发起请求 #

jQuery里获取输入框的值非常简单，用$('#你的输入框ID').val()就能替代原生的getElementById写法。我们把原来的固定变量改成从输入框动态取值，再绑定按钮的点击事件来触发请求：

// 给查询按钮绑定点击事件
$('#queryBtn').click(function() {
  // 获取输入框的值，同时去掉首尾空格做简单校验
  var userSchema = $('#schemaInput').val().trim();
  
  // 校验：如果用户没输入内容，提示一下
  if (!userSchema) {
    alert('请输入有效的schema名称哦！');
    return;
  }
  
  // 发起JSON请求，把用户输入的值作为参数传递
  $.getJSON("sql_query.php", 
    { parameter: userSchema }, // 这里用用户输入的值替换原来的固定schema
    saveToArray // 依然调用你原来的回调函数处理结果
  );
});

第三步：可选优化——支持回车触发查询 #

为了提升用户体验，我们可以加个小功能：用户在输入框按下回车键时自动触发查询：

// 监听输入框的回车事件
$('#schemaInput').keypress(function(event) {
  // 回车键的键码是13
  if (event.which === 13) {
    // 手动触发按钮的点击事件
    $('#queryBtn').click();
  }
});

一些关键说明 #

• jQuery选择器$('#schemaInput')和原生document.getElementById('schemaInput')作用完全一致，但写法更简洁，还支持更复杂的选择逻辑
• .val()方法是jQuery统一用来获取/设置表单控件值的方法，比原生的.value更通用（比如下拉框、复选框也能直接用）
• 记得一定要在页面里先引入jQuery库，比如在<body>底部添加：<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>（当然你也可以下载本地版本）
• 后端的sql_query.php一定要做好参数校验和SQL注入防护！比如对传入的parameter值做过滤，或者用预编译语句执行SQL，这一点非常重要

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