从json抓取数据时,我遇到动画数字效果问题。
如果动画数字效果从html加载,它可以正常工作,但是如果我从json加载动画数字效果则不起作用。
html代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.animateNumbers.js" type="text/javascript"></script>
</head>
<body>
Time from html (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)
<div id="display_time"></div>
<script>
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
}
});
});
</script>
</body>
</html>
data_time.php代码:
<?php
if(isset($_POST['get_time']))
{
$time[] = 'Time from json (<span class="animate-number" data-value="2" data-animation-duration="600"></span>:<span class="animate-number" data-value="33" data-animation-duration="600"></span>h)';
echo json_encode(array('time' => $time ));
}
;?>
预览:click
答案 0 :(得分:2)
使用$time
代替$time[]
。它不需要是一个数组。
答案 1 :(得分:2)
我认为问题在于回调。试试这个,
<script>
function runCallback(){
$('.animate-number').each(function(){
$(this).animateNumbers($(this).attr("data-value"), true, parseInt($(this).attr("data-animation-duration")));
})
}
</script>
<script>
$(function time(){
$.ajax({
type: "POST",
url: "data_time.php",
data: "get_time=true",
dataType:'json',
success: function(data){
$("#display_time").html(data.time);
runCallback();
}
});
});
</script>
答案 2 :(得分:0)
取出dataType:'json'。你不是在发送json。