用 JSON 数据填充 HTML

Fill HTML with JSON data

本文关键字：HTML 填充 数据 JSON      更新时间：2023-09-26

我相信这很简单，但我不知道如何做到这一点。我得到了一个PHP文件，它从MySQL数据库中读取一些数据并以JSON格式返回数据。现在我正在寻找一种将这些数据放入 HTML 中的方法，以便将"data_from_json"替换为"18.5"（在本例中）。任何帮助，不胜感激。

.HTML：

<div class="container">
    <div class="bs-example bs-example-type">
      <table class="table">
        <tbody>
          <tr>
            <td>Temperature</td>
            <td align="right"> "data_from_json" </td>
          </tr>
        </tbody>
      </table>
    </div>
</div>

杰伦内容：

[[18.5]]

我假设你的html文件是不同的，你的php脚本文件是不同的，

您可以简单地向 PHP 脚本发出 Ajax 请求并使用其返回类型，然后在 AJAX 请求的成功事件中，您可以设置所需的 TD innerText即在您的 HTML 页面中，在 body 标签的末尾，您可以创建如下脚本：

<script language="javascript" type="text/javascript">
        //variables
        var scriptToExecute="myDbReader.php";//php script
        //any data that you might want to send to the php script.
        var data ='anyData='+anyValue; 
        //call ajax function 
        makeAjaxRequest(scriptToExecute,data,callBack);
        function callBack(data){
            $('#td').html(data);
        }
</script>
其中td

是td的id，你想要设置文本和makeAjaxRequest是一个简单的函数，它通过传统的XHR或现代jQuery的ajax执行ajax请求，即

function makeAjaxRequest(url,data,_callBack,_failure){
    $.ajax({
       url:url,
       datatype:"application/json",
       type:'get',
       data: data, 
       success:function(data){
           _callBack(data);
       },
       error:function(jqXHR, textStatus, errorThrown){
          if(!_failure){
            console.log(errorThrown);
          }
          else
          {
            _failure(jqXHR,textStatus,errorThrown);
          }
       }
    });
}

您可以使用 jQuery.Ajax 调用 PHP 页面并加载它返回的数据。

    $.ajax({
        url: 'data_to_load.php',
        type: 'GET',
        dataType: 'JSON',
        contentType: 'application/json;charset=utf-8;',
        success: function (data) {
            //Use data.d to access the JSON object that is returned.
        },
        error: function (ajaxrequest) {
            //Use ajaxrequest.responseText to access the error that is returned.
        }
    })

你也可以在这里查看一个纯Javascript Ajax的例子。

你能试试<td align="right"> "<?php echo $data_from_json[0][0] ?>" </td>吗？将您的 php 变量data_from_json更新为 $data_from_json 。

我是一个新的php人。 这只是一个建议。

相关文章：