Edit JSON file with a use of AJAX

I tried to do that when I'm pressing the turn on button it calls the turnon() function which opens the JSON file named light.json and writes there {"light" : "on"} but it doesn't work for me and I don't know why. Can anybody help me?

    <?php  
$light = $_GET['light'];
$file = fopen("light.json", "w") or die("can't open file");
if($light == "on") {  
  fwrite($file, '{"light": "on"}');
} 
else if ($light == "off") {  
  fwrite($file, '{"light": "off"}');
}
?>

<html>  
  <head>      
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>LED for ESP8266</title>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

  </head>
  <body>
    <div class="row" style="margin-top: 20px;">
      <div class="col-md-8 col-md-offset-2">

        <form>
            <input type="button" id="StartButton" value="Turn On" onClick="turnOn()">
        </form>
        <!--<button onclick="turnOn()">Turn On</button>
        <button onclick="turnOff()">Turn Off</button>-->

        <div class="light-status well" style="margin-top: 5px; text-align:center">

        <script type="text/javascript">
            function turnOn() {

                $.ajax({

                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "http://192.168.1.108/test/light.json",
                    data: {"light": "on"},
                    dataType: "json",
                    success: function (data) {
                        alert(data);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        </script>

        </div>
      </div>
    </div>
  </body>
</html>

Thanks!

Answers 1

  • You are sending an AJAX request directly to light.json instead of PHP page. Moreover you're using type: "POST" on AJAX but reading from $_GET on PHP.

    If the PHP script is on the same page, you won't need to specify url in your AJAX request

    <?php
    if (isset($_GET['light'])) {
        $light = $_GET['light'];
        $file = fopen("light.json", "w") or die("can't open file");
        if($light == "on") {  
            fwrite($file, '{"light": "on"}');
        } else if ($light == "off") {  
            fwrite($file, '{"light": "off"}');
        }
        echo fread($file, filesize($file));
    }
    ?>
    
    $.ajax({
        type: "GET",
        data: {"light": "on"},
        success: function (data) {
                alert(data);
        },
        error: function (result) {
                alert("Error");
        }
        });
    

    Be sure that light.json is in the same directory, otherwise specify the correct path on fopen().


Related Articles