使用来自表单/填充框的数据，并在 API 请求的链接中使用它们答案

【问题标题】：Using data from forms / filled boxes and use them in a a link for an API request使用来自表单/填充框的数据，并在 API 请求的链接中使用它们
【发布时间】：2020-07-07 15:04:53
【问题描述】：

我想使用 2 个框来填充 API 链接的 2 个设置。为了获取数据，我使用了 GET 请求。在这种情况下，每个框都是 user_id，第二个是 beatmap_id，它们必须填写两个参数：“u=”和“b=”。为了做到这一点，我在 HTML 2 中创建了可填充按钮和一个可点击的按钮。在 JS 中，我对 user_id 和 beatmap_id 都使用了 getElementById.value 并发出了 AJAX GET 请求

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=\, intial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" Content="ie=edge" />
        <Title>Fetch JSON from API and map lat lon</Title>
        <link href="css/main.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
        <style>


            html, body, h1, h2, h3, h4, h5, h6 {
                font-family: 'Montserrat';font-size: 22px;;
                color: white;
                text-align: center;
                }

        </style>
    </head>
    <body>
        <header>
            <h1> Osu! Thumbnails </h1>

            <br></br>

            <input type = "text"
            id = "user_id"
            placeholder = "user_id"
            value = " " 
            class="c1"/>


            <input type = "text"
            id = "beatmap_id"
            placeholder = "beatmap_id"
            value = " " 
            class="c2"/>

            <br></br>
            <br></br>


            <input type="button"
            id = "Submit"
            value="Submit" 
            class="c3" >
        </header>

        <div id="animal-info"></div>

        <script src="js/main.js"></script>

    </body>
</html>

这里是 JS：

function getValue(){
  var user_id = document.getElementById("user_id").value;
  var beatmap_id = document.getElementById("beatmap_id").value;
  var Submit = document.getElementById("Submit");
}
Submit.addEventListener("click", function() {




var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://osu.ppy.sh/api/get_scores?k=MyApiKey&u='+user_id+'&b='+beatmap_id+'.json');
ourRequest.onload = function() {
    var ourData = JSON.parse(ourRequest.responseText);


    renderHTML(ourData);    
    console.log(ourData)

};
  ourRequest.send();
});`enter code here`

function renderHTML(ourData) {};

另外，为了安全起见，我审查了我的 Api 密钥，如果这会导致任何问题，我们深表歉意

【问题讨论】：

我不确定你的问题是什么。您可以编辑您的帖子以提供您在代码中遇到的问题吗？

标签： javascript html ajax api get

【解决方案1】：

问题是您永远无法获得输入的值。您的 getValue() 函数不返回任何内容。它至少应该返回一个值数组。在您的点击监听器中，您应该通过调用 getValue() 函数来检索输入的值。在 listener 函数中，user_id 和 beatmap_id 甚至都不是定义变量。

尝试在侦听器中调用您的 getValue() 函数并使其返回一个数组。

【讨论】：