从PHP文件中检索JSON,并在div中追加

时间:2014-04-22 08:01:49

标签: javascript php jquery html json

我试图在我的网站内进行实时图表更新。要做到这一点我试图基本上每30秒重新加载一个PHP文件。我让PHP的数据动态地回显出json代码,如下所示。文件中的广告也是<meta http-equiv="refresh" content="30">,它会刷新文件以重新检查数据库。

{"todayCalculateCR":"5%"}{"todayEPC":"0.20"}{"todayCTR":"34%"}{"yesterdayCalculateCR":"35%"}{"yesterdayEPC":"0.03"}{"yesterdayCTR":"24%"}{"monthCalculateCR":"14%"}{"monthEPC":"0.07"}{"monthCTR":"24%"}

基本上我现在想要一些jquery代码放在我的index.php页面上来加载这个文件,解释json代码并将数据附加到正确的div。

实施例: <div class="yesterdayEPC">0.03</div>

我一直在jquery.com和堆栈溢出上寻找基本上获取上述json数据并附加它的方法。

$.get( "dashboard-stats.php", function( data ) { $( "body" ) .append( "yesterdayEPC: " + data.yesterdayEPC ) // John .append( "Time: " + data.yesterdayEPC ); // 2pm }, "json" );

这是制作json的PHP文件的简要说明:

$month_visits = mysql_num_rows(mysql_query("SELECT * FROM locker_reports WHERE UID = '$user_id' AND= '$month_date'")); $month_clicks = mysql_num_rows(mysql_query("SELECT * FROM报告WHERE UID = '$user_id' AND= '$month_date' AND状态= '1'")); $month_leads = mysql_num_rows(mysql_query("SELECT * FROM报告WHERE {UID {1}} {月{1}} {状态{1}}

2 个答案:

答案 0 :(得分:0)

尝试使用setTimeout函数调用$.get() jQuery方法来调用回显JSON的php文件。

reload();

function reload(){
    $.get( "yourFile.php", function( data ) {
      //update table based on data
      var jsonData = $.parseJSON(data);
      $('#myDiv').append('callback called').append(data);
    });
    setTimeout(reload, 30000);
}

答案 1 :(得分:0)

我通过基本上将json放在1个括号中来解决我的问题。

然后使用我发现的教程,我可以在下面做。

Todayclicks: <span id="clicks">

<script>

var JSONObject = {"todayEarnings":"2.60","todayVisits":"62","todayClicks":"26","todayLeads":"3","todayCalculateCR":"9%","todayEPC":"0.12","todayCTR":"42%","yesterdayEarnings":"0.40","yesterdayClicks":"35","yesterdayVisits":"148","yesterdayLeads":"1","yesterdayCalculateCR":"35%","yesterdayEPC":"0.03","yesterdayCTR":"24%","monthEarnings":"3.00","monthClicks":"65","monthVisits":"242","monthLeads":"4","monthCalculateCR":"16%","monthEPC":"0.06","monthCTR":"27%"}

document.getElementById("clicks").innerHTML=JSONObject.todayClicks;

</script>