Javascript 如何在ajax调用中构建搜索url？

我正在使用giphy api构建giphy的wbsite的克隆。假设一个用户正在输入“华尔街的狼”。现在，当我将这个输入值放入一个变量并将其添加到url中时，url的一部分将成为“华尔街的狼”。但根据giphy网站“ryan+gosling”中给出的示例，它应该像“wolf+of+all+street”。有人能给我解释一下这种情况吗？

Giphy API声明：

GIPHY搜索将自动查找与查询完全匹配的内容+ 和match+或match。搜索中的显式AND+或布尔子句 不支持查询

我认为这意味着你只能提交一个字符串

您将希望对字符串进行如下URI编码：

encodeURI('wolf of wall street') // "wolf%20of%20wall%20street"

---

请参见

这是如何将“华尔街之狼”输入转换为“华尔街之狼”：

---

然后只需将变量url添加到giphy api url的末尾。

您可以在此处进行引用。您可以从这里引用API

const PUBLIC_KEY='dc6zaTOxFJmzC'；
const BASE_URL='/api.giphy.com/v1/gifs/'；
常量端点='search'；
常数极限=1；
常数额定值='pg'；
让$queryInput=$（'.query'）；
让$resultWrapper=$（'.result'）；
让$loader=$（'.loader'）；
让$inputWrapper=$（'.inputWrapper'）；
让$clear=$（'.clear'）；
让$button=$（'.random'）；
让电流超时；
让查询={
文本：空，
偏移量：0，
请求（）{
返回`${BASE\u URL}${ENDPOINT}？q=${this.text}&limit=${limit}&rating=${rating}&offset=${this.offset}&api_key=${PUBLIC\u key}`；
},
提取（回调）{
$.getJSON（this.request（））
.成功（数据=>{
让结果=data.data；
如果（结果长度）{
让url=results[0].images.downsized.url；
控制台日志（结果）；
回调（url）；
}否则{
回调（“”）；
}
})
.fail（错误=>{
console.log（错误）；
});
}
}
函数buildImg（src='//giphy.com/embed/xv3WUrBxWkUPC'，classes='gif hidden'）{
返回``；
}
$clear.on（'click'，e=>{
$queryInput.val（“”）；
$inputWrapper.removeClass（'active'）.addClass（'empty'）；
$（'.gif'）.addClass（'hidden'）；
$loader.removeClass（'done'）；
$button.removeClass（'active'）；
});
$button.on（'click'，e=>{
query.offset=Math.floor（Math.random（）*25）；
获取（url=>{
if（url.length）{
$resultWrapper.html（buildImg（url））；
$button.addClass（'active'）；
}否则{
$resultWrapper.html（`p class=“no results hidden”>未找到${query.text}
`）的结果；
$button.removeClass（'active'）；
}
$loader.addClass（'done'）；
currentTimeout=setTimeout（（）=>{
$（'.hidden'）.toggleClass（'hidden'）；
}, 1000);
});
});
$queryInput.on（'keyup'，e=>{
设key=e.which | | e.keyCode；
query.text=$queryInput.val（）；
query.offset=Math.floor（Math.random（）*25）；
如果（当前超时）{
clearTimeout（currentTimeout）；
$loader.removeClass（'done'）；
}
currentTimeout=setTimeout（（）=>{
currentTimeout=null；
$（'.gif'）.addClass（'hidden'）；
if（query.text&&query.text.length）{
$inputWrapper.addClass（'active'）.removeClass（'empty'）；
获取（url=>{
if（url.length）{
$resultWrapper.html（buildImg（url））；
$button.addClass（'active'）；
}否则{
$resultWrapper.html（`p class=“no results hidden”>未找到${query.text}
`）的结果；
$button.removeClass（'active'）；
}
$loader.addClass（'done'）；
currentTimeout=setTimeout（（）=>{
$（'.hidden'）.toggleClass（'hidden'）；
}, 1000);
});
}否则{
$inputWrapper.removeClass（'active'）.addClass（'empty'）；
$button.removeClass（'active'）；
}
}, 1000);
});
$blue:#2196F3；
$transition:300ms缓解；
html{
框大小：边框框；
大纲：无；
*，*：之前，*：之后{
框大小：继承；
&：焦点{
大纲：继承；
}
}
}
.头衔{
文本对齐：居中；
字号：200；
边缘顶部：50px；
}
.输入包装器{
位置：相对位置；
宽度：90%；
最大宽度：500px；
保证金：50px自动0；
.查询{
高度：50px；
宽度：100%；
显示：块；
填充：0 25px；
边框：1px实心#ccc；
&：焦点{
大纲：无；
边框：1件纯色$蓝色；
过渡：过渡；
}
过渡：过渡；
}
.加载器{
高度：5px；
保证金：0；
填充：0；
背景：白色；
保证金：0自动；
位置：相对位置；
&：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
背景：蓝色；
宽度：0%；
高度：5px；
过渡：过渡；
}
&.完成{
&：之前{
宽度：100%；
}
}
}
.清楚{
位置：绝对位置；
排名：0；
右：0；
高度：50px；
宽度：30px；
不透明度：1；
&：之前{
内容：'\00d7'；
颜色：$蓝色；
位置：绝对位置；
排名：0；
左：0；
文本对齐：居中；
宽度：100%；
线高：50px；
过渡：过渡；
}
&：悬停{
&：之前{
光标：指针；
}
}
}
&.主动{
利润上限：-55px；
.查询{
高度：30px；
边际上限：0px；
过渡：过渡；
}
.清楚{
高度：30px；
&：之前{
线高：30px；
}
}
}
&.空的{
.清楚{
不透明度：0；
}
}
过渡：过渡；
}
.结果{
宽度：100%；
最大宽度：500px；
保证金：0自动；
填充：5%25px0；
/*背景：#eee*/
img，p.no-results{
宽度：100%；
最大宽度：500px；
高度：自动；
不透明度：1；
&.隐藏{
不透明度：0；
过渡：过渡；
}
过渡：过渡；
}
p、 没有结果{
字号：200；
var wordsArray = searchInput.split(" ");
var url = wordsArray.join("+");