Используйте несколько входов из HTML-формы в качестве переменных в URL для вызова AJAX

Question

Я хотел бы использовать несколько входов из формы HTML в качестве переменных в URL для вызова ajax.

Входы HTML:

<form id="inputs">
    City name:<input  type="text" name="city" placeholder="Beppu" id="city_input"></br>
    State name:<input type="text" name="state"  placeholder="Oita" id="state_input"></br>
    Country name:<input  type="text" name="country" placeholder="Japan" id="country_input"></br>
    <input type="submit" value="OK" id="submission" onclick="Transfer();">

Я хочу использоватьвходные значения для моего вызова ajax следующие:

 var city_name ="Oita";
 var state_name = "Beppu";
 var country_name = "Japan";

 function Transfer() {
  var city_name = document.getElementById("city_input").value;
  var state_name = document.getElementById("state_input").value;
  var country_name = document.getElementById("country_input").value;
   Start();
 }

function Start(){
  $.ajax({
      url: "http://api.airvisual.com/v2/city?city="+city_name+"&state="+state_name +"&country="+ country_name +"&key=EGJR94mKHwvc9rLhE"
}).then(function(data){

  $('#humidity').append(data.data.current.weather.hu);
  $('#wind_speed').append(data.data.current.weather.ws);
  $('#temperature').append(data.data.current.weather.tp);
  $('#temperature_min').append(data.data.current.weather.tm);
  $('#aqi').append(data.data.current.pollution.aqius); 

 });
}

Вывод будет добавлен к следующему:

  <p><span id=humidity> Humidity: </span><span>%</span>  </p>
  <p><span id=temperature> Temperature:  </span><span>°C </span> </p>
  <p><span id=wind_speed> Wind speed:   </span><span>m/s</span> </p>
  <p><span id=aqi style="bold"> Air Quality Index:   </p>

Желаю вам хорошего дня!Спасибо за помощь!

Answer 1

Вы должны передать все переменные в функцию Start, так как эти переменные используются внутри этой функции.Также вы не должны иметь тело start(), указав фигурные скобки.

Попробуйте следующим образом:

function Transfer() {
  var city_name = document.getElementById("city_input").value;
  var state_name = document.getElementById("state_input").value;
  var country_name = document.getElementById("country_input").value;
  Start(city_name, state_name, country_name);
}

function Start(city_name, state_name, country_name){
  $.ajax({
    url: "http://api.airvisual.com/v2/city?city="+city_name+"&state="+state_name +"&country="+ country_name +"&key=EGJR94mKHwvc9rLhE"
  }).then(function(data){

  $('#humidity').append(data.data.current.weather.hu);
  $('#wind_speed').append(data.data.current.weather.ws);
  $('#temperature').append(data.data.current.weather.tp);
  $('#temperature_min').append(data.data.current.weather.tm);
  $('#aqi').append(data.data.current.pollution.aqius); 

});