JavaScript/jQuery: API 调用后清除数据

Question

我正在用 JS 开发一个简单的项目，该项目从 API 和 returns 调用数据到页面。还有一个 "Reset" 按钮可以将 API 回调重置为基线。我无法弄清楚如何让元素重置。通常我会用 CSS 类来完成它，但是这一次，我将构建一个更大的分配，它将从用户 ID 调用 APIs。所以我想完全通过 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.

})();

Link 到 CodePen：https://codepen.io/anfperez/pen/NJzPoE

谁能给我指点一下？

Answer 1

为了移除输入值，您可以在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>

Answer 2

无需编写任何代码。

你使用了一个表单，所以你只需要使用一个重置按钮。

这是一个基本的 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>

JavaScript/jQuery: API 调用后清除数据

JavaScript/jQuery: Clearing data after an API call

javascript

jquery

json

onclick

reset