Я работаю над проектом зрителей википедии freecodecamp. У меня есть рабочий пример, но есть несколько вещей, которые я не могу понять, как это сделать.

Прежде всего, как мне выполнить некоторый AJAX-запрос, набрав в поле ввода и нажав клавишу ввода или нажав кнопку?

Затем, когда я пытаюсь ввести поле ввода и нажать клавишу ввода, результаты отображаются на веб-странице. Но когда я пытаюсь набрать и ввести снова, новые результаты не отображаются, но предыдущие результаты исчезают, и мне приходится вводить снова и нажимать ввод, чтобы получить новые результаты.

Я знаю, что есть другие посты с использованием jQuery, которые я тоже не понимаю и не хочу использовать jQuery только в простом JavaScript.

var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&origin=*&search=';
var inputSearch = document.myForm.search;
var searchBtn = document.myForm.searchBtn;
var list = document.getElementById("list");
var random = document.getElementsByClassName('random')[0];

random.addEventListener("click" , function(){
  window.open("https://en.wikipedia.org/wiki/Special:Random");
});

function requestData ( e ) {
  var inputStr = e.target.value;
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ) {
        var dataObj = JSON.parse(request.responseText);
        var titles = dataObj[1];
        var descriptions = dataObj[2];
        var links = dataObj[3];
        document.myForm.innerHTML += "<h2><span>" + links.length + "</span> results for \"" + "<span>" + inputStr + "</span>" +"\" </h2>"; 
        list.innerHTML = "";
        for ( var i = 0; i < titles.length; i++ ) {
          var li = "<li><a target='_blank' href=" + links[i] + ">" + titles[i] + "</a></li>";
          list.innerHTML += li;
        }
      }
      else {
        console.log("Server responded with following error code : " + request.status);
      }
    }
  };
  
  if ( e.keyCode === 13 ) {
      console.log(e.type);
      request.open("GET" , url + inputStr);
      request.send(null);
      e.preventDefault();
  }

}

inputSearch.addEventListener("keydown" , requestData);
searchBtn.addEventListener("click" , requestData);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS reset ends here */

body {
	font-size: 16px;
	font-family: 'Oxygen', sans-serif;
	
}

.container-wrapper {
	margin: 0 auto;
	text-align: center;
	height: 100vh;

}

header {
	/*background-color: #fc3e5b;*/
	padding: 80px 0;
}

header h1 {
	font-family: 'Anton', sans-serif; 
	font-size: 70px;
	padding: 30px 0 80px 0;
	color: #fc3e5b;
}

form input , form button {
	padding: 10px 8px;
	font-size: 22px;
	border: 1px solid #fc3e5b;
	outline: 0;
	display: inline;
	margin: 0;
}

form button {
	background-color: #fc3e5b;
	color: #fff;
}

h2 {
	font-size: 25px;
	margin-top: 32px;
}

h2 span {
	font-weight:bold;
	color: #fc3e5b;
}
.random {
	padding: 22px 7px;
	border-radius: 100%;
	margin: 20px 0 15px 0;
}

.random:hover {
	border: 5px solid #fc3e6b;
}

#list {
	width: 75%;
	margin: 0 auto;
}

#list li {
	padding: 16px 8px;
	background-color: #fc3e5b;
	margin: 12px 0;
	text-align: left;
	font-size: 22px;
}

#list li a {
	text-decoration: none;
	color: #fff;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> Wikipedia Viewer </title>
  <link href="https://fonts.googleapis.com/css?family=Anton|Oxygen" rel="stylesheet">
  <link rel="stylesheet" href="wikipedia.css">
</head>
<body>  
  
  <div class="container-wrapper">
  	<header>
  	  <h1> Wikipedia Viewer </h1>
	  <form action="" name="myForm">
	  	<input type="text" name="search" /><button name="searchBtn">Search</button>
	  	<br>
	  	<button name="btnRandom" class="random"> Random<br>Article </button>
	  </form>
	</header>
	
	<div class="container">
	    <ul id="list"></ul>
	</div>
  </div>

  <script src="wikipedia.js"></script>
</body>
</html>
0
knight 28 Май 2017 в 08:20

2 ответа

Лучший ответ

Я обновил ваш код, см. Эту скрипку для рабочего кода Ajax-вызов по нажатию кнопки

Проверьте, работает ли он в соответствии с вашими потребностями.

Вот этот список изменений, которые я внес в ваш код: -

  • Я изменил событие «keydown» на событие «keyup», потому что при «keydown» мы не получили значение нажатой клавиши.
  • Я разделил вызов функции на событие нажатия кнопки поиска и событие ввода ключа, чтобы сделать его немного понятным.
  • Я дал идентификатор для поля ввода поиска, чтобы получить его значение при вызове функции requestData ().
  • Если у нас есть (вместо input type = "button") внутри формы, то при нажатии кнопки форма будет отправлена.
  • Я добавил «event.preventDefault ()» в качестве первой строки в «requestData ()», потому что при нажатии кнопки ввода форма отправляется автоматически.
  • Добавлен абзац для отображения статистики результатов
  • Изменил эту строку document.myForm.innerHTML += на document.getElementById("results_stats").innerHTML

Надеюсь, это поможет вам.

HTML: -

<div class="container-wrapper">
<header>
  <h1> Wikipedia Viewer </h1>
  <form action="" name="myForm">
    <input type="text" name="search" id="txt_search" /><input type="button" name="searchBtn" value="Search"/>
    <br>
    <input type="button" name="btnRandom" class="random" value="Random Article"/>
  <p id="results_stats"></p>
  </form>
</header>

<div class="container">
    <ul id="list"></ul>
</div>

JAVASCRIPT: -

    var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&origin=*&search=';
var inputSearch = document.myForm.search;
var searchBtn = document.myForm.searchBtn;
var list = document.getElementById("list");
var random = document.getElementsByClassName('random')[0];

random.addEventListener("click" , function(){
  window.open("https://en.wikipedia.org/wiki/Special:Random");
});

function getDataFromInputBox(e){
  console.log("Value Entered"+inputStr);

  if ( e.keyCode === 13 ) {
      requestData(e);
  }
}
function requestData(e) {
  e.preventDefault();
  console.log(e.target);
    var inputStr = document.getElementById("txt_search").value;
  if(inputStr != ""){
    console.log(inputStr);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ) {
        var dataObj = JSON.parse(request.responseText);
        var titles = dataObj[1];
        var descriptions = dataObj[2];
        var links = dataObj[3];
        document.getElementById("results_stats").innerHTML = "<h2><span>" + links.length + "</span> results for \"" + "<span>" + inputStr + "</span>" +"\" </h2>"; 
        list.innerHTML = "";
        for ( var i = 0; i < titles.length; i++ ) {
          var li = "<li><a target='_blank' href=" + links[i] + ">" + titles[i] + "</a></li>";
          list.innerHTML += li;
        }
      }
      else {
        console.log("Server responded with following error code : " + request.status);
      }
    }
  };
  request.open("GET" , url + inputStr);
  request.send(null);
  //e.preventDefault(); 
  }
  else{
    document.getElementById("results_stats").innerHTML;
    list.innerHTML = "";
    alert("Enter a value");
  }
}

inputSearch.addEventListener("keyup" , getDataFromInputBox);
searchBtn.addEventListener("click" , requestData);
document.myForm.addEventListener("submit",requestData);

CSS: -

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS reset ends here */

body {
    font-size: 16px;
    font-family: 'Oxygen', sans-serif;

}

.container-wrapper {
    margin: 0 auto;
    text-align: center;
    height: 100vh;

}

header {
    /*background-color: #fc3e5b;*/
    padding: 80px 0;
}

header h1 {
    font-family: 'Anton', sans-serif; 
    font-size: 70px;
    padding: 30px 0 80px 0;
    color: #fc3e5b;
}

form input , form button {
    padding: 10px 8px;
    font-size: 22px;
    border: 1px solid #fc3e5b;
    outline: 0;
    display: inline;
    margin: 0;
}

form button {
    background-color: #fc3e5b;
    color: #fff;
}

h2 {
    font-size: 25px;
    margin-top: 32px;
}

h2 span {
    font-weight:bold;
    color: #fc3e5b;
}
.random {
    padding: 22px 7px;
    border-radius: 100%;
    margin: 20px 0 15px 0;
}

.random:hover {
    border: 5px solid #fc3e6b;
}

#list {
    width: 75%;
    margin: 0 auto;
}

#list li {
    padding: 16px 8px;
    background-color: #fc3e5b;
    margin: 12px 0;
    text-align: left;
    font-size: 22px;
}

#list li a {
    text-decoration: none;
    color: #fff;
}
1
Lalit 28 Май 2017 в 07:00

Поскольку вы упомянули, что вы должны перепечатать то, что написали после нажатия клавиши ввода, я предполагаю, что форма отправляется.

У вас есть условный оператор, который говорит, что если нажата клавиша 13, то eg.preventDefault (), но вы не передаете событие отправки формы.

Попробуй это:

document.querySelector ('form').addEventListener ('submit', requestData(e));
0
Josan Iracheta 28 Май 2017 в 06:07