我正在使用jQuery getJSON从WP API v2中检索帖子。
我有一些输入字段，我想要点击，然后将其他参数附加到请求网址。
请求示例： 帖子 - https://www.example.com/wp-json/wp/v2/posts？ 来自特定类别的帖子 - https://www.example.com/wp-json/wp/v2/posts?categories=44
我的问题是我应该如何将附加参数附加到基本网址“https://www.example.com/wp-json/wp/v2/posts”的末尾？
示例方案：
我需要了解的是，如果没有“选中”任何输入，我将如何删除“categories”参数。此网址上可能还有其他参数，因此有些示例可以让用户开始附加相当长的一系列参数。
如果没有选择任何输入，因为它代表我的示例JS fiddle中的代码保留url中的“categories”参数，但如果在此类别中没有选择，则返回错误的请求url。如果没有选择输入，我需要帮助理解一些逻辑以删除其他参数。
这是我的小提琴，我在整个过程中发表了评论，以帮助解释我想要实现的目标 JSFiddle - https://jsfiddle.net/xun2bsyh/4/
代码：
jQuery(document).ready(function($) {
$('.search-filter-form .filter-categories input[type="checkbox"]').change(function(e) {
//example request - // https://www.sitepoint.com/wp-json/wp/v2/posts?categories=44
getPosts("categories", this.id);
});
// categories parameter and any ID's associated to the category
var getPosts = function(categories, ids) {
var html = "";
var postData = "https://www.sitepoint.com/wp-json/wp/v2/posts?" + categories + "=" + ids;
var request = $.ajax({
url: postData
});
request.done(function(data) {
// succcessfull response, loop over and render each post returned
$.each(data, function(index, postData) {
html += '<li>';
html += '<article class="article-post">';
html += '<header><h2><a href="#">' + postData.title.rendered + '</a></h2></header>';
html += '';
html += '<a href="' + postData.link + '" class="btn btn-primary">View Now</a>';
html += '</article>';
html += '</li>';
});
// render items
$('.listings ul').html(html);
});
// handle errors
request.fail(function(err) {
console.log(err);
});
};
});
<div class="container">
<div class="job-listing-content">
<aside class="search-filter">
<form class="search-filter-form" method="post">
<div class="search-filter-content">
<h3 class="title-filter">Search Criteria <i class="fas fa-chevron-down"></i></h3>
<div class="option-filters-container">
<div class="option-filter">
<div class="option-filter-title">
<h4>Categories Filter</h4>
</div>
<ul class="filter-buttons filter-categories">
<li data-filter="categories">
<input type="checkbox" id="44">
<label for="44>">Category Node JS</label>
</li>
<li data-filter="categories">
<input type="checkbox" id="46">
<label for="46>">Category Design</label>
</li>
</ul>
</div>
</div>
</div>
</form>
</aside>
<div class="listings-container">
<div class="listing-results">
</div>
<div class="listings">
<ul>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
更改您的复选框＆＃39; change事件监听器：
var category_checkboxes = $('.search-filter-form .filter-categories input[type="checkbox"]');
category_checkboxes.change(function(e) {
var categories = [];
// Get checkboxes that have been checked
category_checkboxes.each(function(index, element){
if ( this.checked )
categories.push( this.id );
});
// We have some categories selected, let's display the list
if ( categories.length )
getPosts("categories", categories.join());
else
getPosts("", "");
});
......和：
var postData = "https://www.sitepoint.com/wp-json/wp/v2/posts?" + categories + "=" + ids;
为：
var postData = ( categories && ids) ? "https://www.sitepoint.com/wp-json/wp/v2/posts?" + categories + "=" + ids : "https://www.sitepoint.com/wp-json/wp/v2/posts";
这样，如果您没有通过分类法（＆＃34;类别＆＃34;）或ids，那么您的getPosts()函数将返回所有帖子。
<强>演示：
jQuery(document).ready(function($) {
var category_checkboxes = $('.search-filter-form .filter-categories input[type="checkbox"]');
category_checkboxes.change(function(e) {
var categories = [];
category_checkboxes.each(function(index, element){
if ( this.checked )
categories.push( this.id );
});
// We have some categories selected, let's display the list
if ( categories.length )
getPosts("categories", categories.join());
else
getPosts("", "");
});
// categories parameter and any ID's associated to the category
var getPosts = function(categories, ids) {
var html = "";
var postData = ( categories && ids) ? "https://www.sitepoint.com/wp-json/wp/v2/posts?" + categories + "=" + ids : "https://www.sitepoint.com/wp-json/wp/v2/posts";
var request = $.ajax({
url: postData
});
request.done(function(data) {
// succcessfull response, loop over and render each post returned
$.each(data, function(index, postData) {
html += '<li>';
html += '<article class="article-post">';
html += '<header><h2><a href="#">' + postData.title.rendered + '</a></h2></header>';
html += '';
html += '<a href="' + postData.link + '" class="btn btn-primary">View Now</a>';
html += '</article>';
html += '</li>';
});
// render items
$('.listings ul').html(html);
});
// handle errors
request.fail(function(err) {
console.log(err);
});
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="job-listing-content">
<aside class="search-filter">
<form class="search-filter-form" method="post">
<div class="search-filter-content">
<h3 class="title-filter">Search Criteria <i class="fas fa-chevron-down"></i></h3>
<div class="option-filters-container">
<div class="option-filter">
<div class="option-filter-title">
<h4>Categories Filter</h4>
</div>
<ul class="filter-buttons filter-categories">
<li data-filter="categories">
<input type="checkbox" id="44">
<label for="44>">Category Node JS</label>
</li>
<li data-filter="categories">
<input type="checkbox" id="46">
<label for="46>">Category Design</label>
</li>
</ul>
</div>
</div>
</div>
</form>
</aside>
<div class="listings-container">
<div class="listing-results">
</div>
<div class="listings">
<ul>
</ul>
</div>
</div>
</div>
</div>