Использование данных из форм / заполненных полей и использование их в качестве ссылки для запроса API - PullRequest
Новая
       47

Использование данных из форм / заполненных полей и использование их в качестве ссылки для запроса API

0 голосов
/ 27 марта 2020

Я хотел бы использовать 2 поля, чтобы заполнить 2 настройки ссылки API. Чтобы получить данные, я использовал запрос GET. Каждый из блоков - в этом случае user_id, а второй - beatmap_id, и они должны заполнить два параметра: «u =» и «b =». Чтобы сделать это, я создал в HTML 2 заполняемых кнопках и одну нажимаемую. и в JS я использовал getElementById.value для user_id и beatmap_id и сделал запрос 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 просто для безопасности, извините, если это вызывает какие-либо проблемы

1 Ответ

0 голосов
/ 27 марта 2020

Проблема в том, что вы никогда не получаете значения входов. Ваша функция getValue () ничего не возвращает. Он должен возвращать массив значений по крайней мере. В прослушивателе кликов вы должны получить значения входных данных, вызвав функцию getValue (). В функции слушателя user_id и beatmap_id даже не определены переменными.

Попробуйте вызвать функцию getValue () в слушателе и заставить ее вернуть массив.

...