WordPress页面实现输入文本直接追加至URL末尾的提交按钮

HTML原生表单的GET方法默认会把参数以?key=value的格式拼到URL里，没法直接生成你要的路径式URL，下面提供几种可行的解决办法：

1. 用JavaScript拦截表单提交（纯前端实现） #

通过JS阻止表单的默认提交行为，手动构造目标URL并跳转，这是最直接的前端方案。

示例代码：

<form id="textAppendForm">
  <input type="text" id="userInput" placeholder="请输入内容">
  <button type="submit">提交</button>
</form>

<script>
// 监听表单提交事件
document.getElementById('textAppendForm').addEventListener('submit', function(event) {
  // 阻止默认提交逻辑
  event.preventDefault();
  
  const inputContent = document.getElementById('userInput').value.trim();
  if (!inputContent) {
    alert('请输入内容');
    return;
  }
  
  // 构造目标URL，用encodeURIComponent处理特殊字符
  const basePath = 'https://test.com/aventuras/iniciante/';
  const targetUrl = basePath + encodeURIComponent(inputContent);
  
  // 跳转到目标地址
  window.location.href = targetUrl;
});
</script>

• 必须用encodeURIComponent()转义输入内容，避免空格、中文、特殊符号导致URL失效。
• 可以根据需求添加输入校验，比如限制字符长度、禁止特殊字符等。

2. 结合后端路由重写（更规范的生产环境方案） #

如果你的项目有后端服务（比如Nginx、Node.js、PHP等），可以通过路由规则实现重定向或直接解析：

• 前端依然用普通GET表单提交，参数名设为id，表单提交地址为https://test.com/aventuras/iniciante/。
• 后端配置路由，将带?id=xxx的请求重定向到/aventuras/iniciante/xxx，或者直接解析参数并返回对应内容，同时让浏览器显示干净的URL。

以Nginx为例，添加rewrite规则：

location /aventuras/iniciante/ {
  if ($args ~* "^id=(.*)$") {
    set $inputValue $1;
    rewrite ^ /aventuras/iniciante/$inputValue? permanent;
  }
}

这种方式对用户更友好，也符合RESTful的URL设计规范。

3. 简化版：无表单的按钮跳转 #

如果不需要表单的其他特性，直接用输入框+按钮的组合，点击按钮时触发跳转逻辑：

<input type="text" id="simpleInput" placeholder="输入内容">
<button onclick="goToTarget()">跳转</button>

<script>
function goToTarget() {
  const inputVal = document.getElementById('simpleInput').value.trim();
  if (inputVal) {
    window.location.href = 'https://test.com/aventuras/iniciante/' + encodeURIComponent(inputVal);
  }
}
</script>

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