如何在JavaScript的Fetch调用中包含URL的ID查询参数?

我有一个网页,在url链接(?id=videoID)中包含视频ID。我的网页的一个例子。

我想在Azure Logic应用的请求中包含相同的videoID作为查询参数。我不太清楚,如何将其包含在我在网页中进行的Fetch调用中(在下面的代码中)(类似于 “语言”)。基本上,在表单提交时,我们如何在fetch调用的URL中包含videoID查询参数?

我试图做的是。

解决方案:

更新了 handleSubmit() 检索到的 videoId 传给 fetchForLanguage():

function handleSubmit(event) {
  event.preventDefault()
  const data = new FormData(event.currentTarget)
  const languages = data.getAll('language')
  console.info('languages selected:', languages)

  let params = new URLSearchParams(document.location.search.substring(1));
  let videoId = params.get("id"); // Video ID

  fetchForLanguages(languages, videoId)
    .then((result) => console.log('got result:', result))
}

更新 fetchForLanguage() 包括 videoId 在POSTed数据中。

function fetchForLanguages(languages, videoId) {
  console.info('starting fetch for', languages)
  return fetch("https://prod-00.westus2.logic.azure.com:443/workflows/366b73ac2f354e2799b87db3c0241adc/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=FdEthGEqPF7UUYf4pB69Q--ZxnZRKngXhFZnVjPxyc4", { // this is my azure  provided endpoint instead
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      languages: languages,
      videoID: videoId
    })
  }).then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
    }
    return response.json()
  })
}

请注意 videoID (大写 “ID”)是我假设您要发送给Azure的密钥,基于您的原始请求,不要和 videoId,这是我存储它的Javascript变量的名称。我还假设原始传入参数的名称是 id 但你可以在 handleSubmit().

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何将脚本部分的数据中的方法名传递给Vue上的@click?

2022-9-8 14:51:28

未分类

如何避免安卓系统应用栏,flutter?

2022-9-8 14:51:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索