JavaScript / jQuery: очистка данных после вызова API - PullRequest
Новая
       19

JavaScript / jQuery: очистка данных после вызова API

2 голосов
/ 18 марта 2019

Я работаю над простым проектом в JS, который вызывает данные из API и возвращает на страницу. Также есть кнопка «Сброс», которая должна сбросить обратный вызов API до базового уровня. У меня проблемы с выяснением, как заставить элементы сбросить. Обычно я делаю это с классами CSS, но на этот раз я буду создавать более крупное назначение, которое будет вызывать API из идентификаторов пользователей. Поэтому я хотел бы сделать это исключительно через JS / jQuery и без использования элемента формы.

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather Vain</title>
</head>
<h1> Weather 4 Ever </h1>
<body class = "change">
  <p class="prompt">Type in a US city to get temperature data!</p>
  <form class="pure-form">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
    <button type="submit" class="reset-button">Reset</button>
  </form>

  <p id="forecast"></p>

  <p class="date"></p>
</body>
</html>

CSS 

html, body {
  background-color: #5CBF94;
  font-weight: 100;
  color: #FFF;
}

h1, h2, h3, h4, h5, h6, p {
  text-align: center;
  font-weight: 100;
  width: 100%;
}

h1 {
  font-size: 3em;
}

.prompt {
  font-size: 1.2em;
  margin-top: 4em;
}

form {
  color: #000;
  width: 290px;
  margin: 0 auto;
}

.date {
  position: absolute;
  bottom: 0;
  text-align: center;
}

img {
  margin: 0 auto;
}

JS 

console.log("Script loaded")
"use strict";

(function() {
    $('.pure-button').click(function(e) {
        e.preventDefault()
        console.log("click noticed")
    $.ajax({
        url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('.pure-input-rounded').val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
        type: "GET",
        success: function(data){
            var temp = data.main.temp
            var sky = data.weather[0].description
            $('#forecast').text("The current temperature in " + $('.pure-input-rounded').val() + " is " + temp + " degrees Fahrenheit. It is currently " + sky + "."  )

        }

    })
})

  (".reset-button").onclick.reset() //this is the part that I need to figure out.

})();

Ссылка на CodePen: https://codepen.io/anfperez/pen/NJzPoE

Может кто-нибудь дать мне какие-нибудь указатели?

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Не нужно ничего кодировать.

Вы используете форму, поэтому вам просто нужно использовать кнопку сброса.

Это базовая функция HTML 1:

<button type="reset" class="pure-button">Reset</button>

(function() {

$('.pure-form').submit(function(e) {
  e.preventDefault()
  console.log("click noticed")
	$.ajax({
		// var city = $('.pure-input-rounded').val()
		url: "https://api.openweathermap.org/data/2.5/weather?q=" + $('.pure-input-rounded').val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
		type: "GET",
		success: function(data){
			console.log(data)

      $('#forecast').text(`The current temperature in ${data.name} is ${data.main.temp} degrees Fahrenheit. It is currently ${data.weather[0].description}`)
		}

	})
})

$('.pure-form').on('reset', function(e) {
  $('#forecast').text('');
})

})();

// this is useless => (".reset-button").onclick("reset") 
html, body {
  background-color: #5CBF94;
  font-weight: 100;
  color: #FFF;
}
h1, h2, h3, h4, h5, h6, p {
  text-align: center;
  font-weight: 100;
  width: 100%;
}
h1 {
  font-size: 3em;
}
.prompt {
  font-size: 1.2em;
  margin-top: 4em;
}
form {
  color: #000;
  width: 290px;
  margin: 0 auto;
}
.date {
  position: absolute;
  bottom: 0;
  text-align: center;
}
img {
  margin: 0 auto;
}

input { background-color: #FFF }
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1> Weather 4 Ever </h1>
<p class="prompt">Type in a US city to get temperature data!</p>
<form class="pure-form">
  <fieldset>
    <input id="input-city" type="text" class="pure-input-rounded"   placeholder="Enter city name here..." /> 

  </fieldset>
  <button type="submit" class="pure-button">Search</button>
  <button type="reset" class="pure-button">Reset</button>
</form>

<p id="forecast"></p>
1 голос
/ 18 марта 2019

Чтобы удалить входное значение, вы можете в Jquery использовать функцию .val и присвоить ей параметр ''.

Кроме того, для повышения производительности лучше хранить элементы Jquery в переменных, чтобы вам не приходилось использовать Jquery для их поиска при каждом выполнении действия (например, щелчка) 

console.log("Script loaded")
"use strict";

(function() {
  var $inputElement = $('.pure-input-rounded');
  var $forecastElement = $('#forecast');

  $('.pure-button').click(function(e) {
    e.preventDefault()
    console.log("click noticed")
    $.ajax({
      // var city = $('.pure-input-rounded').val()
      url: "https://api.openweathermap.org/data/2.5/weather?q=" + $inputElement.val() + ",US&appid=6549863730776a52fadf3fe935d5eecc&units=Imperial",
      type: "GET",
      success: function(data) {
        console.log(data)
        var temp = data.main.temp
        var sky = data.weather[0].description
        $forecastElement.text("The current temperature in " + $('.pure-input-rounded').val() + " is " + temp + " degrees Fahrenheit. It is currently " + sky + ".")

      }

    })
  })

  $(".reset-button").click(function() {
    $inputElement.val('');
  })

})();
html,
body {
  background-color: #5CBF94;
  font-weight: 100;
  color: #FFF;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  text-align: center;
  font-weight: 100;
  width: 100%;
}

h1 {
  font-size: 3em;
}

.prompt {
  font-size: 1.2em;
  margin-top: 4em;
}

form {
  color: #000;
  width: 290px;
  margin: 0 auto;
}

.date {
  position: absolute;
  bottom: 0;
  text-align: center;
}

img {
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Weather Vain</title>
</head>
<h1> Weather 4 Ever </h1>

<body class="change">
  <p class="prompt">Type in a US city to get temperature data!</p>
  <form class="pure-form" onsubmit="event.preventDefault();">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
    <button type="button" class="reset-button">Reset</button>
  </form>

  <p id="forecast"></p>

  <p class="date"></p>
</body>

</html>
...