时间戳

首页 > 解决方案 > 使用来自 html 表单的多个输入作为 url 中的变量进行 ajax 调用

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

问题描述

我想使用来自 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();">

我想为我的 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>

祝你有个美好的一天！谢谢您的帮助！

标签： javascripthtmlajaxapi

解决方案

您应该将所有变量传递给函数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); 

});

推荐阅读