Javascript 使用html表单中的多个输入作为ajax调用url中的变量

我想使用HTML表单中的多个输入作为ajax调用URL中的变量

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

输出将附加到以下内容：

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

湿度：%

温度：摄氏度

风速：米/秒

空气质素指数：

---

祝你一天愉快！谢谢你的帮助

您应该将所有变量传递给函数

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代码可能有问题吗？我尝试添加警报（“测试”）；在我的函数Transfer（）中查看它是否由表单提交触发。但是我点击按钮后什么也没有出现。@XiaocuiWu，如果url和其他信息是正确的，那么它应该可以工作……我怎么会因为它说的城市名称无效而无法获取任何数据

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

});