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

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

这是我的索引.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>

这是我的保存温度限制.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"
}

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

这项工作：

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

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

不要忘记把</script>放在<script src="jquery.js">之后

如果我

理解正确，您正在尝试将limitTemps保存到您的tempLimit.json中。这是行不通的。您不能直接通过 ajax 写入文件。

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

以下是使用 PHP 构建 REST API 的一些好技巧。如何构建一个 RESTful API？

好吧，首先，您没有指定究竟哪些内容不起作用。

它不起作用的一个原因是选择器#currTemp.form-group错误。请参考 jQuery 关于选择器的文档。

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

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

相关内容

最新更新

热门标签：