Javascript 使用getJSON动态编码API用户输入

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

以下是我目前的代码：

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>')

  });
});

var client_id=“fcbcd3e60e7f6615d0e5c64ab8e830d9695c4c30a74586e8d234f9835923ad75”； $（“#字段提交”）。单击（函数（）{ query=$（“#query”）.val（）； }) $.getJSON（'https://api.unsplash.com/search/photos?page=1&query=dog&client_id=fcbcd3e60e7f6615d0e5c64ab8e830d9695c4c30a74586e8d234f9835923ad75，函数（数据）{ 控制台日志（数据）； var imageList=数据。结果； $.each（图像列表、函数（i、val）{ var图像=val； var imageURL=val.url.regular； var imageWidth=val.width； console.log（imageURL）； $（'.grid'）。追加（''） }); });

---

将JSON调用放在要在click处理程序的回调中调用的函数中，或者将其添加到回调本身（就像我在下面所做的那样），然后使用a将变量嵌入到字符串中

$("#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) {
    // ...
   });
});