Question

我是PHP，jQuery和AJAX的初学者。我尝试创建一个使用AJAX设置和显示温度限制的简单网站。我想从JSON文件中读取并在单击按钮后用新数据覆盖它。

这是我的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"
}

我只是想知道我的错误是什么。任何帮助赞赏。

Answer 1

如果我理解正确，您正在尝试将limitTemps保存到tempLimit.json。这不行。你不能直接通过ajax写文件。

您需要在php中创建一个接收limitTemps的API端点，然后从php修改你的tempLimit.json。

以下是使用PHP构建REST API的一些好技巧。 How to build a RESTful API?

Answer 2

嗯，首先，你没有说明究竟什么不起作用。

因为选择器#currTemp.form-group错误而无法正常工作的一个原因。请参阅jQuery关于选择器的文档。

#currTemp.form-group选择id="currTemp和class form-group的元素，这显然不存在于您的HTML中。

您可以尝试从选择器中删除.form-group以使其正常工作。

Answer 3

这项工作：

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

选择器#用于ID，.用于类。

请勿忘记在</script>

之后放置<script src="jquery.js">

为什么它不起作用？ JSON，AJAX，PHP

3 个答案: