ajax呼び出しのURLの変数としてhtmlフォームからの複数の入力を使用する

debugcn 投稿 Dev

Xiaocui Wu

ajax呼び出しのURLの変数として、HTMLフォームからの複数の入力を使用したいと思います。

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>

良い一日を！ご協力ありがとうございました！

マムン

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

});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]