Warum funktioniert es nicht? JSON, AJAX, PHP

Ich bin insgesamt Anfänger bei PHP, jQuery und AJAX. Ich versuche, eine einfache Website zu erstellen, die die Temperaturgrenze mithilfe von AJAX festlegt und anzeigt. Ich möchte aus der JSON-Datei lesen und überschreiben sie mit neuen Daten nach dem Klicken auf die Schaltfläche.Warum funktioniert es nicht? JSON, AJAX, PHP

Hier ist meine index.php:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <meta name="description" content=""> 
     <meta name="author" content="xxx"> 

     <title>Temperature Limit</title> 

     <!-- Bootstrap core CSS --> 
     <link href="dist/css/bootstrap.min.css" rel="stylesheet"> 
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
     <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 
     <!-- Custom styles for this template --> 
     <link href="jumbotron-narrow.css" rel="stylesheet"> 
     <script src="assets/js/ie-emulation-modes-warning.js"></script> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="jumbotron"> 
       <h4><b>Type temperature limit</b></h4> 

       <form class="form-horizontal"> 
        <div class="form-group" > 
         <label class="control-label col-sm-4" for="minTemp">Minimal:</label> 
         <div class="col-sm-6"> 
          <input type="number" class="form-control" id="minTemp"  min="10" max="25" > 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="control-label col-sm-4" for="maxTemp">Maximal:</label> 
         <div class="col-sm-6"> 
          <input type="number" class="form-control" id="maxTemp" min="25" max="40"> 
         </div> 
        </div> 


        <div class="form-group"> 
         <div class="col-sm-offset-4 col-sm-5"> 
          <button id="saveTermBut" type="submit" class="btn btn-sm btn-default">Save</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 

     <div class="container"> 
      <h2>Current Conditions </h2> 

      <div class="jumbotron"> 
       <div class="container col-lg-6"> 
        <div class="form-group"> 
         <label class="control-label " for="currTemp">Minimal Temp:</label> 
         <output id="currTemp"> 
        </div> 
       </div> 
       <div class="container"> 
        <div class="form-group"> 
         <label class="control-label " for="currTemp1">Maximal Temp:</label> 
         <output id="currTemp1"> 
        </div> 
       </div> 
      </div> 
     </div> 

     <footer class="footer"> 
      <p>&copy; 2016 Company, Inc.</p> 
     </footer> 

     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
     <script src="assets/js/ie10-viewport-bug-workaround.js"></script> 
     <script src="jquery.js"> 

     <script src="SaveTempLimit.js"></script> 
    </body> 
</html>

Hier mein SaveTempLimit.js ist:

$(document).ready(function() { 
    $.ajax({ 
     type: 'GET', 
     url: 'tempLimit.json', 
     dataType: 'json', 
     success: function (tempLimit) { 
      $('#currTemp.form-group').append(tempLimit.minTemp); 
      $('#currTemp1.form-group').append(tempLimit.maxTemp); 
     } 
    }); 

    $('#saveTermBut').on('click', function() { 

     var limitTemps = { 
      minTemp: $('#minTemp.form-control').val(), 
      maxTemp: $('#maxTemp.form-control').val() 
     }; 

     $.ajax({ 
      type: 'POST', 
      url: 'tempLimit.json', 
      dataType: 'json', 
      data: limitTemps, 
      success: function() { 
       console.log(limitTemps); 
      }, 
      error: function (err) { 
       alert(err); 
      } 
     }); 
    }); 
});

Und hier ist meine JSON-Datei:

{ 
    "minTemp": "20", 
    "maxTemp":"22" 
}

Ich bin einfach frage mich, was sind meine Fehler. Jede Hilfe wird geschätzt.

Quelle

2017-01-24 Vahilio

was macht die Konsole anzeigen und die Fehlerberichterstattung? Es gibt auch keinen echten PHP-Code hier –

Sie können die JSON-Datei auf dem Server mit diesem Code nicht ändern, wenn Sie das versuchen. Wenn Sie versuchen, die Datei zu aktualisieren, benötigen Sie einen serverseitigen Code, der die Post-Parameter liest und in die Datei schreibt. – epascarello

Es ist einfach, setzen nach

Wenn ich richtig verstanden habe, versuchen Sie limitTemps zu Ihrem tempLimit.json zu speichern. Dies wird nicht funktionieren. Sie können nicht direkt über Ajax in Dateien schreiben.

Sie müssen einen API-Endpunkt in Ihrem PHP erstellen, der limitTemps empfängt, und ändert dann Ihre TempLimit.json von der PHP.

Hier sind einige gute Tipps zum Erstellen einer REST-API mit PHP. How to build a RESTful API?

Quelle

2017-01-24 17:16:22 SethWhite

Ja, ich versuche Limit Temps zu tempLimit.json zu speichern. Ich habe irgendwie etwas in PHP geschrieben, weiß aber nicht, ob es gut ist. – Vahilio

Wenn es funktioniert, aber Sie sind besorgt über die Code-Qualität, ein wenig Forschung und dann eine Frage über Code Review Stack-Austausch. – SethWhite

Nun, vor allem haben Sie nicht angegeben, was genau nicht funktioniert.

Ein Grund, warum es nicht funktioniert, weil der Selektor falsch ist. Bitte beachten Sie die Dokumentation von jQuery bezüglich Selektoren.

#currTemp.form-group wählt ein Element mit id="currTemp und classform-group mit, die eindeutig nicht in Ihrem HTML existiert.

Sie können versuchen, .form-group aus dem Selektor zu entfernen, damit es funktioniert.

Quelle

2017-01-24 17:16:31 31piy

Verwandte Themen