JavaScript 代码未返回预期的 URL 作为响应
JavaScript code not returning an expected URL as response
我正在尝试让 [this][1] HTML 和 JavaScript 代码在本地工作，但我没有成功。例如，如果您 运行 他们的代码片段并选择一种语言 "English United States" 并点击“提交”，您应该会看到回复。
此处记录了 URL 接口 - https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
new URL(...) 创建的对象在 console.log 中看起来不太好。
试试这个。
console.log(url.href);
console.log(typeof url);
这是我在做 console.log(url)（一个对象）时看到的 -
URL { href：“https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=en-GB&reTranslate=...&includeStreamingUrls=...&accessToken=...", origin: "https://api.videoindexer.ai”，协议："https:"，用户名：“”，密码：“”，主机："api.videoindexer.ai"，主机名："api.videoindexer.ai"，端口：“”，路径名：“/location/Accounts/accountId/Videos/videoId/Index”，搜索：“?language=en-GB&reTranslate=...&includeStreamingUrls=...&accessToken=...”}
<!DOCTYPE html>
<html>
<body>
<form>
<select name="language" id="language">
<option value="en-GB">Please select language (Default en-GB</option>
<option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
<option value="sr-Latn-RS">Serbian (Latin)</option>
<option value="bs-Latn">Bosnian</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
<option value="fil-PH">Filipino</option>
<option value="en-GB">English United Kingdom</option>
<option value="en-FJ">Fijian</option>
<option value="en-AU">English Australia</option>
<option value="en-WS">Samoan</option>
<option value="en-US">English United States</option>
<option value="el-GR">Greek</option>
<option value="es-ES">Spanish</option>
<option value="et-EE">Estonian</option>
<option value="fa-IR">Persian</option>
<option value="fi-FI">Finnish</option>
<option value="fr-FR">French</option>
<option value="fr-HT">Haitian</option>
<option value="af-ZA">Afrikaans</option>
<option value="ar-SY">Arabic Syrian Arab Republic</option>
<option value="ar-EG">Arabic Egypt</option>
<option value="da-DK">Danish</option>
<option value="de-DE">German</option>
<option value="bg-BG">Bulgarian</option>
<option value="bn-BD">Bangla</option>
<option value="mg-MG">Malagasy</option>
<option value="ms-MY">Malay</option>
<option value="mt-MT">Maltese</option>
<option value="ca-ES">Catalan</option>
<option value="cs-CZ">Czech</option>
<option value="nl-NL">Dutch</option>
<option value="nb-NO">Norwegian</option>
<option value="id-ID">Indonesian</option>
<option value="it-IT">Italian</option>
<option value="lt-LT">Lithuanian</option>
<option value="lv-LV">Latvian</option>
<option value="ja-JP">Japanese</option>
<option value="ur-PK">Urdu</option>
<option value="uk-UA">Ukrainian</option>
<option value="hi-IN">Hindi</option>
<option value="he-IL">Hebrew</option>
<option value="hu-HU">Hungarian</option>
<option value="hr-HR">Croatian</option>
<option value="ko-KR">Korean</option>
<option value="vi-VN">Vietnamese</option>
<option value="tr-TR">Turkish</option>
<option value="ta-IN">Tamil</option>
<option value="th-TH">Thai</option>
<option value="to-TO">Tongan</option>
<option value="ru-RU">Russian</option>
<option value="ro-RO">Romanian</option>
<option value="pt-BR">Portuguese</option>
<option value="pl-PL">Polish</option>
<option value="sv-SE">Swedish</option>
<option value="sw-KE">Kiswahili</option>
<option value="sl-SI">Slovenian</option>
<option value="sk-SK">Slovak</option>
</select>
<input type="submit" />
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
const language = document.getElementById("language").value;
url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
// console.log(url.href);
// console.log(typeof url);
})
</script>
</form>
</body>
</html>
您代码中的脚本标记位于表单的结束标记上方。
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
const language = document.getElementById("language").value;
url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
})
</script>
</form>
将整个脚本部分移动到 body 标记结束的正上方。
<!DOCTYPE html>
<html>
<body>
<form>
<select name="language" id="language">
<option value="en-GB">Please select language (Default en-GB</option>
<option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
<option value="sr-Latn-RS">Serbian (Latin)</option>
<option value="bs-Latn">Bosnian</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
<option value="fil-PH">Filipino</option>
<option value="en-GB">English United Kingdom</option>
<option value="en-FJ">Fijian</option>
<option value="en-AU">English Australia</option>
<option value="en-WS">Samoan</option>
<option value="en-US">English United States</option>
<option value="el-GR">Greek</option>
<option value="es-ES">Spanish</option>
<option value="et-EE">Estonian</option>
<option value="fa-IR">Persian</option>
<option value="fi-FI">Finnish</option>
<option value="fr-FR">French</option>
<option value="fr-HT">Haitian</option>
<option value="af-ZA">Afrikaans</option>
<option value="ar-SY">Arabic Syrian Arab Republic</option>
<option value="ar-EG">Arabic Egypt</option>
<option value="da-DK">Danish</option>
<option value="de-DE">German</option>
<option value="bg-BG">Bulgarian</option>
<option value="bn-BD">Bangla</option>
<option value="mg-MG">Malagasy</option>
<option value="ms-MY">Malay</option>
<option value="mt-MT">Maltese</option>
<option value="ca-ES">Catalan</option>
<option value="cs-CZ">Czech</option>
<option value="nl-NL">Dutch</option>
<option value="nb-NO">Norwegian</option>
<option value="id-ID">Indonesian</option>
<option value="it-IT">Italian</option>
<option value="lt-LT">Lithuanian</option>
<option value="lv-LV">Latvian</option>
<option value="ja-JP">Japanese</option>
<option value="ur-PK">Urdu</option>
<option value="uk-UA">Ukrainian</option>
<option value="hi-IN">Hindi</option>
<option value="he-IL">Hebrew</option>
<option value="hu-HU">Hungarian</option>
<option value="hr-HR">Croatian</option>
<option value="ko-KR">Korean</option>
<option value="vi-VN">Vietnamese</option>
<option value="tr-TR">Turkish</option>
<option value="ta-IN">Tamil</option>
<option value="th-TH">Thai</option>
<option value="to-TO">Tongan</option>
<option value="ru-RU">Russian</option>
<option value="ro-RO">Romanian</option>
<option value="pt-BR">Portuguese</option>
<option value="pl-PL">Polish</option>
<option value="sv-SE">Swedish</option>
<option value="sw-KE">Kiswahili</option>
<option value="sl-SI">Slovenian</option>
<option value="sk-SK">Slovak</option>
</select>
<input type="submit" />
</form>
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
const language = document.getElementById("language").value;
url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
})
</script>
</body>
</html>
由于表单中有脚本，提交时代码不知道要做什么。
由于您希望结果显示在表单下方而不是控制台上，因此您必须在 html 正文中创建一个 DOM 元素，然后使用选择器更改该元素的内容，像这样，
<div>
<form>
<select name="language" id="language">
<option value="en-GB">Please select language (Default en-GB</option>
<option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
<option value="sr-Latn-RS">Serbian (Latin)</option>
<option value="bs-Latn">Bosnian</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
<option value="fil-PH">Filipino</option>
<option value="en-GB">English United Kingdom</option>
<option value="en-FJ">Fijian</option>
<option value="en-AU">English Australia</option>
<option value="en-WS">Samoan</option>
<option value="en-US">English United States</option>
<option value="el-GR">Greek</option>
<option value="es-ES">Spanish</option>
<option value="et-EE">Estonian</option>
<option value="fa-IR">Persian</option>
<option value="fi-FI">Finnish</option>
<option value="fr-FR">French</option>
<option value="fr-HT">Haitian</option>
<option value="af-ZA">Afrikaans</option>
<option value="ar-SY">Arabic Syrian Arab Republic</option>
<option value="ar-EG">Arabic Egypt</option>
<option value="da-DK">Danish</option>
<option value="de-DE">German</option>
<option value="bg-BG">Bulgarian</option>
<option value="bn-BD">Bangla</option>
<option value="mg-MG">Malagasy</option>
<option value="ms-MY">Malay</option>
<option value="mt-MT">Maltese</option>
<option value="ca-ES">Catalan</option>
<option value="cs-CZ">Czech</option>
<option value="nl-NL">Dutch</option>
<option value="nb-NO">Norwegian</option>
<option value="id-ID">Indonesian</option>
<option value="it-IT">Italian</option>
<option value="lt-LT">Lithuanian</option>
<option value="lv-LV">Latvian</option>
<option value="ja-JP">Japanese</option>
<option value="ur-PK">Urdu</option>
<option value="uk-UA">Ukrainian</option>
<option value="hi-IN">Hindi</option>
<option value="he-IL">Hebrew</option>
<option value="hu-HU">Hungarian</option>
<option value="hr-HR">Croatian</option>
<option value="ko-KR">Korean</option>
<option value="vi-VN">Vietnamese</option>
<option value="tr-TR">Turkish</option>
<option value="ta-IN">Tamil</option>
<option value="th-TH">Thai</option>
<option value="to-TO">Tongan</option>
<option value="ru-RU">Russian</option>
<option value="ro-RO">Romanian</option>
<option value="pt-BR">Portuguese</option>
<option value="pl-PL">Polish</option>
<option value="sv-SE">Swedish</option>
<option value="sw-KE">Kiswahili</option>
<option value="sl-SI">Slovenian</option>
<option value="sk-SK">Slovak</option>
</select>
<input type="submit" />
</form>
<p id="result" />
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const language = document.getElementById("language").value;
const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=${language}&reTranslate=...&includeStreamingUrls=...&accessToken=...`;
//url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
document.getElementById('result').innerHTML = url
})
</script>
</div>
我正在尝试让 [this][1] HTML 和 JavaScript 代码在本地工作，但我没有成功。例如，如果您 运行 他们的代码片段并选择一种语言 "English United States" 并点击“提交”，您应该会看到回复。
此处记录了 URL 接口 - https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
new URL(...) 创建的对象在 console.log 中看起来不太好。 试试这个。
console.log(url.href);
console.log(typeof url);
这是我在做 console.log(url)（一个对象）时看到的 - URL { href：“https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=en-GB&reTranslate=...&includeStreamingUrls=...&accessToken=...", origin: "https://api.videoindexer.ai”，协议："https:"，用户名：“”，密码：“”，主机："api.videoindexer.ai"，主机名："api.videoindexer.ai"，端口：“”，路径名：“/location/Accounts/accountId/Videos/videoId/Index”，搜索：“?language=en-GB&reTranslate=...&includeStreamingUrls=...&accessToken=...”}
<!DOCTYPE html>
<html>
<body>
<form>
<select name="language" id="language">
<option value="en-GB">Please select language (Default en-GB</option>
<option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
<option value="sr-Latn-RS">Serbian (Latin)</option>
<option value="bs-Latn">Bosnian</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
<option value="fil-PH">Filipino</option>
<option value="en-GB">English United Kingdom</option>
<option value="en-FJ">Fijian</option>
<option value="en-AU">English Australia</option>
<option value="en-WS">Samoan</option>
<option value="en-US">English United States</option>
<option value="el-GR">Greek</option>
<option value="es-ES">Spanish</option>
<option value="et-EE">Estonian</option>
<option value="fa-IR">Persian</option>
<option value="fi-FI">Finnish</option>
<option value="fr-FR">French</option>
<option value="fr-HT">Haitian</option>
<option value="af-ZA">Afrikaans</option>
<option value="ar-SY">Arabic Syrian Arab Republic</option>
<option value="ar-EG">Arabic Egypt</option>
<option value="da-DK">Danish</option>
<option value="de-DE">German</option>
<option value="bg-BG">Bulgarian</option>
<option value="bn-BD">Bangla</option>
<option value="mg-MG">Malagasy</option>
<option value="ms-MY">Malay</option>
<option value="mt-MT">Maltese</option>
<option value="ca-ES">Catalan</option>
<option value="cs-CZ">Czech</option>
<option value="nl-NL">Dutch</option>
<option value="nb-NO">Norwegian</option>
<option value="id-ID">Indonesian</option>
<option value="it-IT">Italian</option>
<option value="lt-LT">Lithuanian</option>
<option value="lv-LV">Latvian</option>
<option value="ja-JP">Japanese</option>
<option value="ur-PK">Urdu</option>
<option value="uk-UA">Ukrainian</option>
<option value="hi-IN">Hindi</option>
<option value="he-IL">Hebrew</option>
<option value="hu-HU">Hungarian</option>
<option value="hr-HR">Croatian</option>
<option value="ko-KR">Korean</option>
<option value="vi-VN">Vietnamese</option>
<option value="tr-TR">Turkish</option>
<option value="ta-IN">Tamil</option>
<option value="th-TH">Thai</option>
<option value="to-TO">Tongan</option>
<option value="ru-RU">Russian</option>
<option value="ro-RO">Romanian</option>
<option value="pt-BR">Portuguese</option>
<option value="pl-PL">Polish</option>
<option value="sv-SE">Swedish</option>
<option value="sw-KE">Kiswahili</option>
<option value="sl-SI">Slovenian</option>
<option value="sk-SK">Slovak</option>
</select>
<input type="submit" />
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
const language = document.getElementById("language").value;
url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
// console.log(url.href);
// console.log(typeof url);
})
</script>
</form>
</body>
</html>
您代码中的脚本标记位于表单的结束标记上方。
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
const language = document.getElementById("language").value;
url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
})
</script>
</form>
将整个脚本部分移动到 body 标记结束的正上方。
<!DOCTYPE html>
<html>
<body>
<form>
<select name="language" id="language">
<option value="en-GB">Please select language (Default en-GB</option>
<option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
<option value="sr-Latn-RS">Serbian (Latin)</option>
<option value="bs-Latn">Bosnian</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
<option value="fil-PH">Filipino</option>
<option value="en-GB">English United Kingdom</option>
<option value="en-FJ">Fijian</option>
<option value="en-AU">English Australia</option>
<option value="en-WS">Samoan</option>
<option value="en-US">English United States</option>
<option value="el-GR">Greek</option>
<option value="es-ES">Spanish</option>
<option value="et-EE">Estonian</option>
<option value="fa-IR">Persian</option>
<option value="fi-FI">Finnish</option>
<option value="fr-FR">French</option>
<option value="fr-HT">Haitian</option>
<option value="af-ZA">Afrikaans</option>
<option value="ar-SY">Arabic Syrian Arab Republic</option>
<option value="ar-EG">Arabic Egypt</option>
<option value="da-DK">Danish</option>
<option value="de-DE">German</option>
<option value="bg-BG">Bulgarian</option>
<option value="bn-BD">Bangla</option>
<option value="mg-MG">Malagasy</option>
<option value="ms-MY">Malay</option>
<option value="mt-MT">Maltese</option>
<option value="ca-ES">Catalan</option>
<option value="cs-CZ">Czech</option>
<option value="nl-NL">Dutch</option>
<option value="nb-NO">Norwegian</option>
<option value="id-ID">Indonesian</option>
<option value="it-IT">Italian</option>
<option value="lt-LT">Lithuanian</option>
<option value="lv-LV">Latvian</option>
<option value="ja-JP">Japanese</option>
<option value="ur-PK">Urdu</option>
<option value="uk-UA">Ukrainian</option>
<option value="hi-IN">Hindi</option>
<option value="he-IL">Hebrew</option>
<option value="hu-HU">Hungarian</option>
<option value="hr-HR">Croatian</option>
<option value="ko-KR">Korean</option>
<option value="vi-VN">Vietnamese</option>
<option value="tr-TR">Turkish</option>
<option value="ta-IN">Tamil</option>
<option value="th-TH">Thai</option>
<option value="to-TO">Tongan</option>
<option value="ru-RU">Russian</option>
<option value="ro-RO">Romanian</option>
<option value="pt-BR">Portuguese</option>
<option value="pl-PL">Polish</option>
<option value="sv-SE">Swedish</option>
<option value="sw-KE">Kiswahili</option>
<option value="sl-SI">Slovenian</option>
<option value="sk-SK">Slovak</option>
</select>
<input type="submit" />
</form>
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
const language = document.getElementById("language").value;
url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
})
</script>
</body>
</html>
由于表单中有脚本，提交时代码不知道要做什么。
由于您希望结果显示在表单下方而不是控制台上，因此您必须在 html 正文中创建一个 DOM 元素，然后使用选择器更改该元素的内容，像这样，
<div>
<form>
<select name="language" id="language">
<option value="en-GB">Please select language (Default en-GB</option>
<option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
<option value="sr-Latn-RS">Serbian (Latin)</option>
<option value="bs-Latn">Bosnian</option>
<option value="zh-Hans">Chinese (Simplified)</option>
<option value="zh-Hant">Chinese (Traditional)</option>
<option value="fil-PH">Filipino</option>
<option value="en-GB">English United Kingdom</option>
<option value="en-FJ">Fijian</option>
<option value="en-AU">English Australia</option>
<option value="en-WS">Samoan</option>
<option value="en-US">English United States</option>
<option value="el-GR">Greek</option>
<option value="es-ES">Spanish</option>
<option value="et-EE">Estonian</option>
<option value="fa-IR">Persian</option>
<option value="fi-FI">Finnish</option>
<option value="fr-FR">French</option>
<option value="fr-HT">Haitian</option>
<option value="af-ZA">Afrikaans</option>
<option value="ar-SY">Arabic Syrian Arab Republic</option>
<option value="ar-EG">Arabic Egypt</option>
<option value="da-DK">Danish</option>
<option value="de-DE">German</option>
<option value="bg-BG">Bulgarian</option>
<option value="bn-BD">Bangla</option>
<option value="mg-MG">Malagasy</option>
<option value="ms-MY">Malay</option>
<option value="mt-MT">Maltese</option>
<option value="ca-ES">Catalan</option>
<option value="cs-CZ">Czech</option>
<option value="nl-NL">Dutch</option>
<option value="nb-NO">Norwegian</option>
<option value="id-ID">Indonesian</option>
<option value="it-IT">Italian</option>
<option value="lt-LT">Lithuanian</option>
<option value="lv-LV">Latvian</option>
<option value="ja-JP">Japanese</option>
<option value="ur-PK">Urdu</option>
<option value="uk-UA">Ukrainian</option>
<option value="hi-IN">Hindi</option>
<option value="he-IL">Hebrew</option>
<option value="hu-HU">Hungarian</option>
<option value="hr-HR">Croatian</option>
<option value="ko-KR">Korean</option>
<option value="vi-VN">Vietnamese</option>
<option value="tr-TR">Turkish</option>
<option value="ta-IN">Tamil</option>
<option value="th-TH">Thai</option>
<option value="to-TO">Tongan</option>
<option value="ru-RU">Russian</option>
<option value="ro-RO">Romanian</option>
<option value="pt-BR">Portuguese</option>
<option value="pl-PL">Polish</option>
<option value="sv-SE">Swedish</option>
<option value="sw-KE">Kiswahili</option>
<option value="sl-SI">Slovenian</option>
<option value="sk-SK">Slovak</option>
</select>
<input type="submit" />
</form>
<p id="result" />
<script>
document.querySelector("form").addEventListener("submit",function(e) {
e.preventDefault(); // stop submission
const language = document.getElementById("language").value;
const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=${language}&reTranslate=...&includeStreamingUrls=...&accessToken=...`;
//url.searchParams.set("language",language);
console.log(url); // change to a fetch or similar
document.getElementById('result').innerHTML = url
})
</script>
</div>