将外部 JSON 数据加载到 html 中

Question

我试图做到这一点，所以每当我按下提交按钮时，它都会使用另一个文件中的 json 数据填写我所有的“lorem ipsum”条目。我该怎么做才能让它正常工作？

这是我现在的 html 代码：

<!-- begin panel -->
            <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    </div>
                    <h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td><b>Status</b></td>
                                <td id="fld_status">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Server Update</b></td>
                                <td id="fld_server_update">Lorem ipsum dolor </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    </div>
                    <h4 class="panel-title">Remote Terminal Unit</h4>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td><b>Signal Strength</b></td>
                                <td id="fld_signalstr">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Main Power</b></td>
                                <td id="fld_power">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Backup Battery</b></td>
                                <td id="fld_battery">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Ambient Temperature</b></td>
                                <td id="fld_temp">Lorem ipsum dolor </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end panel -->
            <div class="col-md-8 col-md-offset-4">
                    <input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5"></input>
                </div>

这是我在 test_json.json 中的 json 代码：

{
"fld_status": "Online",
"fld_server_update": "Friday, May, 19, 2017 10:33:53 AM Central Daylight Time",
"fld_signalstr": "42%",
"fld_power": "23.98 Volts",
"fld_battery": "7.538 Volts",
"fld_temp": "72 Degrees F",
}

Answer 1

考虑到您已经拥有ID 和value，您已经非常接近了！假设您的 JSON 存储在 var a 中，您应该能够使用 jQuery 使用 ID 查找元素，并将文本替换为值！ （点击提交后）

$("#btn").click(function(){
  for (key in a) {
    var identifier = key;
    var value = a[key];
    $("#" + identifier).html(value);
  }
})

var a = {
  "fld_status": "Online",
  "fld_server_update": "Friday, May, 19, 2017 10:33:53 AM Central Daylight Time",
  "fld_signalstr": "42%",
  "fld_power": "23.98 Volts",
  "fld_battery": "7.538 Volts",
  "fld_temp": "72 Degrees F",
};

$("#btn").click(function(){
  for (key in a) {
    var identifier = key;
    var value = a[key];
    $("#" + identifier).html(value);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-inverse" data-sortable-id="table-basic-1">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    </div>
                    <h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td><b>Status</b></td>
                                <td id="fld_status">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Server Update</b></td>
                                <td id="fld_server_update">Lorem ipsum dolor </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="panel panel-inverse" data-sortable-id="table-basic-1">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    </div>
                    <h4 class="panel-title">Remote Terminal Unit</h4>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td><b>Signal Strength</b></td>
                                <td id="fld_signalstr">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Main Power</b></td>
                                <td id="fld_power">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Backup Battery</b></td>
                                <td id="fld_battery">Lorem ipsum dolor </td>
                            </tr>
                            <tr>
                                <td><b>Ambient Temperature</b></td>
                                <td id="fld_temp">Lorem ipsum dolor </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end panel -->
            <div class="col-md-8 col-md-offset-4">
                    <input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5"></input>
                </div>