2016-12-08 16 views
0

なぜ送信ボタンが結果を出力しないのですか?コードに何が間違っているのか分からないようです。基本的にはMashapeのBMI API(https://market.mashape.com/nviror/bmi-calculator)ですが、動作させることができません。私は、この問題を解決することはできませんので ... JavaScriptとAPI年代に新しいです。ここJavaScriptとHTMLのフォームの一部です:APIが正しく動作しないのはなぜですか?

注:

// TODO: Use a function closure and release global $ 
 
$.noConflict(); 
 
(function($){ 
 
    $(document).ready(function() { 
 
    $('#bmi-form').on('submit', function(event) { 
 
     //saving inputs 
 
     var weight = $('#bmi-weight').val(); 
 
     var height = $('#bmi-height').val(); 
 
     
 
     $.get(
 
      'https://bmi.p.mashape.com/WyFUMDOkdrmshARoxfXDWLZmMeccp180tJEjsnCz3MCFuXJdEo' + weight + height, 
 
      function(data,json){ 
 
      $('#bmi').append(
 
      '<p>Your BMI is: '+data.bmi.value+'</p>' 
 
     ); 
 
      $('#bmi').append(
 
      '<p>Your status is: '+data.bmi.status+'</p>' 
 
     ); 
 
      $('#bmi').append(
 
      '<p>Your risk is: '+data.bmi.risk+'</p>' 
 
     ); 
 
     }); 
 
     var string= 'Your Bmi: ' +value+ '. Your status:' +status+ '. Your risk:' +risk + '.'; 
 
     $('#results').text(string); 
 

 
    }); 
 
    event.preventDefault(); 
 
    }); 
 
});(jQuery);
<section id="bmi"> 
 
     <form id="bmi-form" name="bmi-form" method="get" action="#null"> 
 
      <label for="bmi-weight">Type in your weight:</label> 
 
      <input type="text" id="bmi-weight" name="bmi-weight" /> 
 
      <label for="bmi-height">Type in your height:</label> 
 
      <input type="text" id="bmi-height" type="text" name="bmi-height" /> 
 
      <input type="submit" id="bmi-submit" name="bmi-submit" value="Check BMI" /> 
 
     </form> 
 
     <p id="results"></p> 
 
     </section>

+0

GETリクエストを使用している間、あなたがリンクしているAPIはPOST要求を使用しています。また、ペイロードデータをJSON –

+0

@OscarSiauwとして構築する必要があります。私が選択したAPIが意図したとおりに動作せず、GETリクエストを使用するAPIを見つけられるはずです。または私は間違って何かをしています... –

+0

APIは正しいですが、代わりにPOSTリクエストを使用する必要があります。 JSONとしてペイロードを構築します。 APIドキュメントの例: {"weight":{"value": "85.00"、 "unit": "kg"}、 "height":{"value": "170.00"、 "unit" "cm"}、 "sex": "m"、 "age": "24"、 "waist": "34.00"、 "hip": "40.00"} –

答えて

0

はこのような何かを行います:残念ながら私は以下のコードをテストしていません

$.ajax(
    { 
     method: "POST", 
     url: "https://bmi.p.mashape.com/", 
     headers: { 
      "X-Mashape-Key": <enter your API key here>, 
      "Content-Type": "application/json", 
      "Accept": "application/json" 
     }, 
     data: '{"weight":{"value":"85.00","unit":"kg"},"height":{"value":"170.00","unit":"cm"},"sex":"m","age":"24","waist":"34.00","hip":"40.00"}' 
    } 
).done(function(){ 
    console.log("Done"); 
}) 
+0

これは機能しますが、ページロード時に自動的に表示されます送信ボタンを押して、85&170の代わりにフォームの値を表示する必要があります...しかし、確かにいくつかの進歩はありますが... –

+0

ボタンのクリックイベントでそれを呼び出します。フォームからの値を使用してデータペイロードを変更します。 JSONペイロードでPOSTリクエストを行う方法の例を紹介しました –

+0

よろしくお願い致します。 :) –

関連する問題