CODEWITHSUNDEEP
javascriptjqueryjsonajaxpost
ExPoNe
ExPoNe

Reputation: 11

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!

Upvotes: 0

Views: 1165

Answers (2)

DrKey
DrKey

Reputation: 3495

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().

Upvotes: 0

Kenny
Kenny

Reputation: 607

You use POST method to send AJAX request, but try to get it by using GET method from PHP.

Simply change AJAX method from POST to GET can solve the problem.

Upvotes: 1

Related Questions