Im total beginner at PHP, jQuery and AJAX. I try to make a simple website that sets and displays temperature limit using AJAX. I want to read from JSON file and overwrite it with new data after clicking button.

Here is my index.php :

```html
<!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>

```

Here is my SaveTempLimit.js :

```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);
            }
        });
    });
});

```

And here is my json file:

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

```

I'm just wondering what are my mistakes. Any help appreciated.