使用JSON检索数据并将其输入到html文件中

Question

现在，当我点击按钮＆＃34;检索数据＆＃34;时，我正试图这样做。所有的＆＃34; Lorem Ipsum＆＃34;条目填入正确的数据。例如环境温度用另一个文件/位置中指定的温度填充。但我到目前为止还没有运气。

<!-- begin col-6 -->
    <div class="col-md-6">
        <!-- 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">Default Table</h4>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><b>Status</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Server Update</b></td>
                            <td>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">Default Table</h4>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><b>Signal Strength</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Main Power</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Backup Battery</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Ambient Temperature</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- end panel -->
        <div class="col-md-8 col-md-offset-4">
                <button type="submit" class="btn btn-sm btn-primary m-r-5">Retrieve Data</button>
            </div>
    </div>

Answer 1

基本上，您需要确定需要能够更改它们的DOM部分。

基本上，如果你使用JQuery，你可以这样做：

＆＃13;

＆＃13;

$(document).ready(function() {
   $("#btn").click(function() {
      $("#fld_status").text("OK");
      $("#fld_server_update").text("today");
   });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin col-6 -->
    <div class="col-md-6">
        <!-- 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">Default Table</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">Default Table</h4>
            </div>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td><b>Signal Strength</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Main Power</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Backup Battery</b></td>
                            <td>Lorem ipsum dolor </td>
                        </tr>
                        <tr>
                            <td><b>Ambient Temperature</b></td>
                            <td>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">Retrieve Data</input>
            </div>
    </div>

＆＃13;

＆＃13;

＆＃13;