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); 

});

使用来自html表单的多个输入作为url中的变量以进行ajax调用

1 个答案: