なぜ動作しませんか？ JSON、AJAX、PHP

PHP、jQuery、AJAXの初心者です。私はAJAXを使って温度制限を設定して表示するシンプルなウェブサイトを作ろうとしています。 JSONファイルから読み込み、ボタンをクリックして新しいデータで上書きしたい。ここでなぜ動作しませんか？ JSON、AJAX、PHP

は私の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>

は私SaveTempLimit.jsです：

$(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); 
      } 
     }); 
    }); 
});

そして、ここでは私のJSONファイルです：

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

私はちょうどよ私の間違いは何か不思議です。どんな助けもありがたい。

出典

2017-01-24 Vahilio

後</script>を入れて忘れてはいけませんか？ここには実際のPHPもありません –

あなたがしようとしているのであれば、そのコードでサーバー上のJSONファイルを変更することはできません。ファイルを更新しようとしている場合は、ポストパラメータを読み込んでファイルに書き込む何らかのサーバサイドコードが必要になります。 – epascarello

シンプルですが、を入れてください！ :) –

この作業：

  $('#currTemp').append(tempLimit.minTemp); 
      $('#currTemp1').append(tempLimit.maxTemp);

セレクタ#はID用であり、クラスの.。

は、コンソールショーとエラー報告を何<script src="jquery.js">

出典

2017-01-24 17:24:15

ありがとう：私はそれらを見たhavent。 – Vahilio

私が正しく理解していれば、あなたはあなたのtempLimit.jsonにlimitTempsを保存しようとしています。これは動作しません。あなたはajax経由で直接ファイルに書き込むことはできません。

limitTempsを受け取るPHPエンドポイントを作成し、phpからtempLimit.jsonを変更する必要があります。

ここでは、PHPでREST APIを構築するためのヒントを紹介します。すべての最初のHow to build a RESTful API?

出典

2017-01-24 17:16:22 SethWhite

はい、私はtempLimit.jsonに制限tempsを保存しようとします。私はちょっとPHPで何か書きましたが、それが良いのか分かりません。 – Vahilio

動作してもコードの品質が心配な場合は、少しの調査を行い、次にコードレビューのスタック交換に関する質問をしてください。 – SethWhite

さて、あなたは正確に動作していないものを指定しませんでした。

セレクタ#currTemp.form-groupが間違っているために動作しない理由の1つです。セレクタに関するjQueryのドキュメントを参照してください。

#currTemp.form-groupはid="currTemp、classはform-groupの要素を選択します。これは明らかにHTMLには存在しません。

あなたはそれが仕事を得るために、セレクタから.form-groupを削除してくださいすることができます。

出典

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

なぜ動作しませんか？ JSON、AJAX、PHP

答えて

関連する問題