Пользовательский ввод и анализ в JavaScript - PullRequest
Новая
       11

Пользовательский ввод и анализ в JavaScript

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

Моя цель:

  1. Попросить пользователя ввести данные (например, "Пожалуйста, введите категорию: ' Ввод пользователя '")
  2. Поиск данных через API используя ' пользовательский ввод ' в качестве параметра запроса
  3. Вернуть результаты обратно пользователю

Вот что у меня есть: 

<!DOCTYPE html>
<html>
<body>

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">

<script>
var i = 0, len;
displayCD(i);


function displayCD(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", 'http://www.example.com/api/search/?query=engines&format=xml', true);
  xmlhttp.send();
}

function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("video");
  len = x.length;
  document.getElementById("showCD").innerHTML =
  "Title: " +
  x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
  "<br>Url: " +
  x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue +
  "<br>Embed code: " + 
  x[i].getElementsByTagName("embed")[0].childNodes[0].nodeValue;
}

function next() {
  if (i < len-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  if (i > 0) {
    i--;
    displayCD(i);
  }
}
</script>

</body>
</html>

Это возвращает результаты, и давайте прокручиваем их с помощью кнопок, все отлично, но я не могу найти способ заменить значение «двигателей», которое я указал выше в качестве параметра запроса, значением ' пользовательский ввод '. Я думал, что мог бы создать переменную с document.getElementById для ввода пользователя, а затем создать другую переменную, используя url.concat (str1, str2) с url = 'http://www.example.com/api/search/?query=', str1 = переменная, содержащая вернул пользовательский ввод и str2 = '& format = xml', но это не совсем работает.

Короче говоря, конечная цель: заменить то, где находится параметр запроса 'engine', на то, что вводят пользователи.

Я думаю, что мне нужно использовать обратные вызовы или асинхронность c. Я новичок в этом и все еще учусь.

1 Ответ

0 голосов
/ 21 марта 2020 
<body>

...

<span>Please enter a category:</span>
<input type="text" id="category">
<input type="button" value="Search" onclick="search()"

<script>

    function search() {
        let query = document.getElementById('category').value;
        let url = `http://www.example.com/api/search/?query=${query}&format=xml`;
        ...
        xmlhttp.open("GET", url);
        xmphttp.send();
    }

</script>


</body>
...