Question

我目前正在开发一个项目，我的任务是读取JSON文件，显示当前/默认值，并且可以通过用户输入覆盖这些值，这反过来也会覆盖原始值JSON文件带有新值。

我目前很难搞清楚如何初始读取或加载JSON文件以显示每个键的默认值，并且能够解析并获取值和/或编辑值。

对不起，如果这是一个基本问题，我查了很多不同的方法来做这个涉及jQuery或AJAX，但我无法让它工作。

这是我的JSON文件。（Parameters.json）

{
  "IMax": 16384, 
  "IMin": 1,
  "DynamicRange": 72,
  "I50": 16,
  "I75": 192
}

这是我的代码。（Parameters.html）

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="ParametersCSS.css">
    <title>Map Plot Parameter</title>
</head>
<body>

<h1>Map Plot Parameters</h1>
<hr>
<br>

<form id='parameterForm'>
<div class='parameter-form'>

<script language="javascript" type="text/javascript">

//Where I would initially read into the JSON file

</script>

<h4>IMax</h4>
<p>Parameter 1: <input type="text" id="Para1" value="Int Value..."></p>
<br>

<h4>IMin</h4>
<p>Parameter 2: <input type="text" id="Para2" value="Int Value..."></p>
<br>

<h4>Dynamic Range</h4>
<p>Parameter 3: <input type="text" id="Para3" value="Int Value..."></p>
<br>

<h4>I50</h4>
<p>Parameter 4: <input type="text" id="Para4" value="Int Value..."></p>
<br>

<h4>I75</h4>
<p>Parameter 5: <input type="text" id="Para5" value="Int Value..."></p>
<br>

<div class='wrapper'>
    <input class="button" type="button" value="submit" 
onclick="saveParameters()">
</div>
<script language="javascript" type="text/javascript">

//Where I would save the new parameters, which would be written into the
//original JSON file. 

function saveParameters() {

    var Para1 = document.getElementById("Para1").value;
    var Para2 = document.getElementById("Para2").value;
    var Para3 = document.getElementById("Para3").value;
    var Para4 = document.getElementById("Para4").value;
    var Para5 = document.getElementById("Para5").value;

    document.write(Para1, Para2, Para3, Para4, Para5);

}
</script>

</div>
</form>

</body>
</html>

这是我的CSS。（ParametersCSS.css）

h1 {
    text-align: center;
}

h4{
    text-align: center;
}

p {
    text-align: center;
}

.wrapper{
    text-align: center;
    margin-top: 10px
}

.button {
    top: 50%
}

我的代码本质上接受了我希望能够写入原始JSON文件的值。我还希望它最初读入文件以显示JSON文件的原始值

装载＆amp;编辑JSON文件

0 个答案: