字符串在连接以调用 GET 请求后未添加到 URL 字符串

Question

我正在尝试对一些 JSON 数据发出 GET 请求，JSON 数据有 ID，我正在尝试指定要在 URL 中检索的 ID，依赖在使用按钮和 onclick 函数的文本字段 input.value 上。

我创建了一个变量来存储 input.value，并将其连接到存储 url 的位置，然后调用 GET 请求。

但是当我 console.log(url) 时，输出不包括存储的 input.value，即使当我 console.log(id) 时它确实出现了。

此外，如果我用 id 手动填充 id 而不是使用 input.value，它确实有效。但是我需要用户决定前端哪个ID到select.

<input type="textarea">
<button onclick="myFunction()">Click</button>

let id = '';
const url = 'https://www.someurl/' + id +  '?someurl.com';

function myFunction() {
const input = document.querySelector('input');
    id = input.value;
    console.log(id);
    console.log(url);
    const getXML = new XMLHttpRequest();
    getXML.responseType = 'json';
    getXML.open('GET', url);
    getXML.send();
    getXML.onreadystatechange = function () {
        const response = getXML.response;
        if (response) {
            console.log(getXML.status);
            console.log(response);
            console.log(id);
            console.log(url);
            console.log(typeof id);
        }
    }

Answer 1

这是因为当 id 为 '' (null) 时声明了 url。因此即使它被添加到 url，它仍然是空的。您需要将 url 设置为变量，而不是常量，并且在 id 的值在 myFunction 中更改后，您需要更新 url.

<!DOCTYPE html>
<html>
<body>
    <input type="textarea">
    <button onclick="myFunction()">Click</button>
    <script type="text/javascript">
        let id = '';
        function myFunction() {
            const input = document.querySelector('input');
            id = input.value;
            let url = 'https://www.someurl/' + id +  '?someurl.com';
            console.log(id);
            console.log(url);
            const getXML = new XMLHttpRequest();
            getXML.responseType = 'json';
            getXML.open('GET', url);
            getXML.send();
            getXML.onreadystatechange = function () {
                const response = getXML.response;
                if (response) {
                    console.log(getXML.status);
                    console.log(response);
                    console.log(id);
                    console.log(url);
                    console.log(typeof id);
                }
            }
        }
    </script>
</body>
</html>

Answer 2

相反，尝试将 URL & ID 放在函数中

function myFunction() { 
const input = document.querySelector('input');
  let id = input.value;
  const url = 'https://www.someurl/' + id +  ' someurl.com';
    console.log(id);
    console.log(url);
    const getXML = new XMLHttpRequest();
    getXML.responseType = 'json';
    getXML.open('GET', url);
    getXML.send();
    getXML.onreadystatechange = function () {
        const response = getXML.response;
        if (response) {
            console.log(getXML.status);
        }
    }
}

字符串在连接以调用 GET 请求后未添加到 URL 字符串

String not being added to URL String after being concatenated to call a GET Request

javascript

forms

json

xmlhttprequest