自动更新html内容

时间:2017-02-26 13:53:16

标签: php html ajax

我有一个temp.php文件,它以json格式提供输出:

[{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{"Date":"2017-02-25 23:25:50","Temp":"0.00"}]

我想将所有日期和临时值加载到网页中。为此,我写的代码是:

<div id ="output"> text replaced </div>
$.ajax({
url:'temp.php',
data : " ",
dataType:'json'
success:function(data)
 {
   var date = data[0];
   var tempval = data[1];
$('#output').html("<b> DATE:</b>"+date+"<b> TEMPER: </b>"+tempval)
 }

但是我得到输出作为对象,这是什么错误?

1 个答案:

答案 0 :(得分:2)

你必须访问如下

data[0].Date   // 2016-10-25 16:12:30
data[0].Temp   // 1.0 

OR

data[0]['Date']   // 2016-10-25 16:12:30
data[0]['Temp']   // 1.0 

例如:

var data= [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{"Date":"2017-02-25 23:25:50","Temp":"0.00"}]

console.log(data[0].Date);
console.log(data[0].Temp);
console.log(data[0]['Date']);
console.log(data[0]['Temp'])

您的访问方式

success:function(data)
 {
   var date = data[0];
   var tempval = data[1];
$('#output').html("<b> DATE:</b>"+date+"<b> TEMPER: </b>"+tempval)
 }

日期

date  = {"Date":"2016-10-25 16:12:30","Temp":"1.00"};
                        ^
                    This is object inside {}

tempval

tempval = {"Date":"2016-10-25 16:24:05","Temp":"1.00"};
                        ^
                    This is object inside {}

因此,你得到

  

但我得到输出为对象对象

发表评论

  

但是这只给出了第一行的数据。我都想要   日期和临时值。需要做什么?

var data= [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{"Date":"2017-02-25 23:25:50","Temp":"0.00"}];

$.each( data, function(index,item){ 
$('#output').append("<b> DATE:</b>"+item.Date+"<b> TEMPER: </b>"+item.Temp+"<br>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

相关问题