为什么它不起作用？ JSON，AJAX，PHP
我总是在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>© 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"
}
我只是想知道我的错误是什么。 任何帮助赞赏。
这项工作：
$('#currTemp').append(tempLimit.minTemp);
$('#currTemp1').append(tempLimit.maxTemp);
选择器#用于ID和. 上课。
不要忘记在<script src="jquery.js">之后放置</script> <script src="jquery.js">
如果我理解正确，那么您试图将limitTemps保存到您的tempLimit.json中。 这不起作用。 你不能通过ajax直接写入文件。
您将需要在接收limitTemps的php中创建一个API端点，然后从php中修改您的tempLimit.json。
以下是关于使用PHP构建REST API的一些好建议。 如何构建RESTful API？
那么，首先，你没有具体说明什么是无效的。
其中一个原因是它不工作，因为选择器#currTemp.form-group是错误的。 请参阅关于选择器的jQuery文档。
#currTemp.form-group选择id="currTemp ，以及具有form-group class ，该元素在HTML中显然不存在。
您可以尝试从选择器中删除.form-group以使其工作。