用JSON数据填充HTML

我相信这是一个容易的，但我不知道如何做到这一点。我有一个PHP文件，它从MySQL数据库读取一些数据并以JSON格式返回数据。现在我正在寻找一种方法将这些数据放入HTML中，以便将“data_from_json”替换为“18.5”（在本例中）。任何帮助表示赞赏。用JSON数据填充HTML

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>

JSON内容：

[[18.5]]

来源

2013-10-22 user2877744

向我们显示您的JSON数据。 – Andy

阅读本文[在html中显示json]（http://stackoverflow.com/questions/18283003/display-json-in-html） – super

我假设你的HTML文件是不同的，你的PHP脚本文件不同的是，

你可以简单地做一个Ajax请求到php脚本并消耗它的返回类型，然后在ajax请求的成功事件中，您可以设置所需的td的innerText 即ie你的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 Ajax请求或现代jQuery的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); 
      } 
     } 
    }); 
}

来源

2013-10-22 13:04:47

这个工程就像一个魅力。非常感谢你！ – user2877744

可以尝试<td align="right"> "<?php echo $data_from_json[0][0] ?>" </td>。更新你的php变量data_from_json到$data_from_json。

我是一个新的PHP家伙。这只是一个建议。

来源

2013-10-22 13:05:52 Sheldon

我认为这在技术上会起作用，并不确定，但即使它在其他答案中的稳定性远低于ajax方法，所以我不会推荐它。 – jhocking

如果使用ajax。我同意在调用服务后使用'$（'td'）。eq（1）.text（data）''。但我认为问题是提问者想知道如何在他的PHP代码中呈现。 – Sheldon

您可以使用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 Javascript Ajax示例here。

来源

2013-10-22 13:06:17 Nunners

用JSON数据填充HTML

回答

相关问题