gpt4 book ai didi

javascript - 使用 getJSON 动态编码 API 用户输入

转载 作者:行者123 更新时间:2023-11-30 13:46:54 25 4
gpt4 key购买 nike

我正在尝试使用 Unsplash API 通过用户输入生成图像。到目前为止,当 query= 被硬编码时,我已经能够检索图像,但我希望结果根据用户键入和提交到查询中的内容而有所不同。下面我将“狗”硬编码为查询输入。

到目前为止,这是我的代码:

var client_id = "fcbcd3e60e7f6615d0e5c64ab8e830d9695c4c30a74586e8d234f9835923ad75";

$("#fieldsubmit").click(function(){
query = $("#query").val();
})

$.getJSON('https://api.unsplash.com/search/photos?page=1&query=dog&client_id=fcbcd3e60e7f6615d0e5c64ab8e830d9695c4c30a74586e8d234f9835923ad75', function(data) {
console.log(data);

var imageList = data.results;
$.each(imageList, function(i, val) {

var image = val;
var imageURL = val.urls.regular;
var imageWidth = val.width;
console.log(imageURL);

$('.grid').append('<div class="image"><img src="'+ imageURL +'"</div>')

});
});

最佳答案

要么将 JSON 调用放在一个函数中,以便在点击处理程序的回调中调用,要么将其添加到回调本身(就像我在下面所做的那样),并使用 template literal将变量直接嵌入到字符串中。

$("#fieldsubmit").click(function(){
const query = $("#query").val();
const endpoint = 'https://api.unsplash.com/search/photos';
const page = 1;
$.getJSON(`${endpoint}?page=${page}&query=${query}&client_id=${client_id}`, function(data) {
// ...
});
});

关于javascript - 使用 getJSON 动态编码 API 用户输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59130157/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com