如何为WP API v2的jQuery getJSON请求追加可选URL参数？

嘿，这个需求其实很好实现，我来给你一步步拆解怎么做～

咱们的核心就是动态构建请求URL：先把基础API地址存好，然后根据用户输入的参数（比如分类ID），把参数合理拼接到基础URL后面，再用$.getJSON发起请求就行。

1. 先搭好HTML结构 #

先做一个参数输入区域（这里用输入框+按钮，你也可以换成下拉选单更友好），再加个用来展示文章的容器：

<!-- 参数控制区 -->
<div class="post-filter">
  <label for="category-input">分类ID：</label>
  <input type="number" id="category-input" placeholder="比如输入44" />
  <button id="load-posts-btn">获取对应分类文章</button>
</div>

<!-- 文章展示容器 -->
<div id="posts-list"></div>

2. 写jQuery逻辑代码 #

接下来就是处理用户交互、拼接URL、发起请求和渲染结果的部分：

// 先定义基础API地址
const baseApiUrl = 'https://www.example.com/wp-json/wp/v2/posts';

// 监听按钮点击事件
$('#load-posts-btn').on('click', function() {
  // 获取用户输入的分类ID，记得去掉前后空格
  const targetCategory = $('#category-input').val().trim();
  
  // 构建请求URL
  let requestUrl = baseApiUrl;
  // 如果用户输入了有效内容，就追加参数
  if (targetCategory) {
    requestUrl += `?categories=${targetCategory}`;
    // 要是需要加多个参数，比如每页显示5篇，就用&拼接：requestUrl += `?categories=${targetCategory}&per_page=5`
  }
  
  // 发起getJSON请求
  $.getJSON(requestUrl, function(postsData) {
    // 先清空之前的文章内容
    $('#posts-list').empty();
    
    // 渲染文章列表
    if (postsData.length > 0) {
      postsData.forEach(post => {
        const postElement = `
          <div class="single-post">
            <h3>${post.title.rendered}</h3>
            <div class="post-excerpt">${post.excerpt.rendered}</div>
          </div>
        `;
        $('#posts-list').append(postElement);
      });
    } else {
      $('#posts-list').html('<p>没有找到对应分类的文章哦～</p>');
    }
  }).fail(function() {
    // 请求失败的提示
    $('#posts-list').html('<p>请求出错啦，请稍后再试～</p>');
  });
});

3. 进阶优化（可选） #

如果以后需要支持多个参数（比如同时筛选分类、标签），推荐用URLSearchParams来管理参数，这样不用手动处理?和&的拼接问题，更规范：

// 示例：同时处理分类和标签参数
const params = new URLSearchParams();
const categoryId = $('#category-input').val().trim();
const tagId = $('#tag-input').val().trim();

if (categoryId) params.append('categories', categoryId);
if (tagId) params.append('tags', tagId);

// 拼接成最终请求URL
const requestUrl = `${baseApiUrl}?${params.toString()}`;

另外，还可以给输入框加个回车触发的功能，提升用户体验：

$('#category-input').on('keypress', function(e) {
  // 回车键的keyCode是13
  if (e.which === 13) {
    $('#load-posts-btn').click();
  }
});

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