2016-12-08 3 views
0

Warum gibt der Senden-Button keine Ergebnisse aus, wie es sein sollte? Ich kann anscheinend nicht bemerken, was mit dem Code falsch sein könnte. Im Grunde ist es eine BMI API von Mashape (https://market.mashape.com/nviror/bmi-calculator) und ich kann es nicht zum Laufen bringen. Ich bin neu in JavaScript und API so dass ich dieses Problem nicht lösen können .. Hier ist das die Javascript und bilden einen Teil der html: Warum funktioniert die API nicht richtig?

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

die API, die Sie POST-Anforderung nicht getestet verbunden verwendet, während Sie GET-Anfrage verwenden. Und außerdem müssen Sie die Nutzlastdaten als JSON –

+0

@OscarSiauw konstruieren, also sagen Sie, dass die API, die ich wählte, nicht wie ich beabsichtigte, und dass ich eine API finden sollte, die eine GET-Anfrage verwendet? Oder mache ich etwas falsches ... –

+0

Die API ist korrekt, aber Sie müssen stattdessen eine POST-Anfrage verwenden. Und konstruiere deine Payload als JSON. Beispiel aus der API-Dokumentation: {"Gewicht": {"Wert": "85,00", "Einheit": "kg"}, "Höhe": {"Wert": "170,00", "Einheit": " cm "}," sex ":" m "," Alter ":" 24 "," Taille ":" 34.00 "," Hüfte ":" 40.00 "} –

Antwort

0

etwas tun:

Hinweis : leider habe ich den Code unten

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

Das funktioniert, aber es zeigt sich automatisch beim Laden der Seite, ich brauche es, um zu zeigen, wenn ich den Absenden-Button und mit den Werten aus dem Formular statt 85 und 170 ... Aber es gibt definitiv einen Fortschritt obwohl ... –

+0

Dann rufen Sie das auf Ihrem Button klicken Ereignis. Und ändern Sie die Datennutzlast mit den Werten aus dem Formular. Ich zeigte Ihnen nur ein Beispiel, wie Sie eine POST-Anfrage mit JSON-Payload durchführen können. –

+0

Okay, vielen Dank! :) –

Verwandte Themen