JQ ajax间隔刷新显示最新更新数据

帮朋友搞一个免刷新的页面，但是要求后台更新数据，前台要实时更新才行；这样的要求第一想到的就是JQ了！别的不说直接上代码吧！半夜了，也累了！

JS代码：

&lt;script&gt;
$(function(){
	function&nbsp;autoPlay(){
	var&nbsp;tableid&nbsp;=&nbsp;$(&#39;#tableid&#39;).val();&nbsp;&nbsp;&nbsp;&nbsp;//用一个&nbsp;input&nbsp;记录ID
		$.ajax({
		&nbsp;&nbsp;&quot;url&quot;:&quot;/index.php?m=content&amp;c=index&amp;a=jsonlist&quot;,
		&nbsp;&nbsp;&quot;type&quot;:&quot;post&quot;,
		&nbsp;&nbsp;&quot;dataType&quot;:&quot;json&quot;,
		&nbsp;&nbsp;&quot;data&quot;:{
			&nbsp;&nbsp;id:tableid
		&nbsp;&nbsp;},
		&nbsp;&nbsp;&quot;async&quot;:false,
		&nbsp;&nbsp;&quot;success&quot;:function(data){
			&nbsp;&nbsp;
			&nbsp;&nbsp;$.each(data.list,function(i,result){
				&nbsp;&nbsp;if(i==0){&nbsp;&nbsp;&nbsp;&nbsp;//记录数据库中最大ID值&nbsp;赋值给&nbsp;INPUT
					&nbsp;&nbsp;$(&#39;#tableid&#39;).val(result.id);
					}
			&nbsp;&nbsp;		item&nbsp;=&nbsp;&#39;&lt;tr&nbsp;class=&quot;&quot;&gt;&lt;td&gt;&#39;+result.shijian+&#39;5&lt;/td&gt;&lt;td&gt;&nbsp;&#39;+result.title+&#39;&nbsp;&lt;/td&gt;&lt;td&gt;&lt;span&nbsp;class=&quot;&nbsp;&nbsp;ball_s_&nbsp;ball_s_blue&nbsp;ball_lenght5&nbsp;&nbsp;&quot;&nbsp;title=&quot;&#39;+result.wan+&#39;&quot;&gt;&#39;+result.wan+&#39;&lt;/span&gt;&lt;span&nbsp;class=&quot;&nbsp;&nbsp;ball_s_&nbsp;ball_s_blue&nbsp;ball_lenght5&nbsp;&nbsp;&quot;&nbsp;title=&quot;&#39;+result.qian+&#39;&quot;&gt;&#39;+result.qian+&#39;&lt;/span&gt;&lt;span&nbsp;class=&quot;&nbsp;&nbsp;ball_s_&nbsp;ball_s_blue&nbsp;ball_lenght5&nbsp;&nbsp;&quot;&nbsp;title=&quot;&#39;+result.bai+&#39;&quot;&gt;&#39;+result.bai+&#39;&lt;/span&gt;&lt;span&nbsp;class=&quot;&nbsp;&nbsp;ball_s_&nbsp;ball_s_blue&nbsp;ball_lenght5&nbsp;&nbsp;&quot;&nbsp;title=&quot;&#39;+result.shi+&#39;&quot;&gt;&#39;+result.shi+&#39;&lt;/span&gt;&lt;span&nbsp;class=&quot;&nbsp;&nbsp;ball_s_&nbsp;ball_s_blue&nbsp;ball_lenght5&nbsp;&nbsp;&quot;&nbsp;title=&quot;&#39;+result.ge+&#39;&quot;&gt;&#39;+result.ge+&#39;&lt;/span&gt;&lt;/td&gt;&lt;td&nbsp;class=&quot;count&quot;&gt;&#39;+result.count+&#39;&lt;/td&gt;&lt;td&nbsp;class=&quot;gray&quot;&gt;&#39;+result.isdan+&#39;&lt;/td&gt;&lt;td&nbsp;class=&quot;blue&quot;&gt;&#39;+result.isxiao+&#39;&lt;/td&gt;&lt;td&nbsp;class=&quot;gray&quot;&gt;&#39;+result.longhu+&#39;&lt;/td&gt;&lt;/tr&gt;&#39;;
					
				&nbsp;&nbsp;$(&#39;#reslist&#39;).append(item);
			&nbsp;&nbsp;});
		&nbsp;&nbsp;}
		});
	}
	setInterval(autoPlay,5000);	//每隔5秒&nbsp;刷新一次
});
&lt;/script&gt;

$(function(){

function autoPlay(){

var tableid = $('#tableid').val();    //用一个 input 记录ID

$.ajax({

  "url":"/index.php?m=content&c=index&a=jsonlist",

  "type":"post",

  "dataType":"json",

  "data":{

  id:tableid

  "async":false,

  "success":function(data){

  $.each(data.list,function(i,result){

  if(i==0){    //记录数据库中最大ID值 赋值给 INPUT

  $('#tableid').val(result.id);

}

   item = '<tr class=""><td>'+result.shijian+'5</td><td> '+result.title+' </td><td><span class="  ball_s_ ball_s_blue ball_lenght5  " title="'+result.wan+'">'+result.wan+'</span><span class="  ball_s_ ball_s_blue ball_lenght5  " title="'+result.qian+'">'+result.qian+'</span><span class="  ball_s_ ball_s_blue ball_lenght5  " title="'+result.bai+'">'+result.bai+'</span><span class="  ball_s_ ball_s_blue ball_lenght5  " title="'+result.shi+'">'+result.shi+'</span><span class="  ball_s_ ball_s_blue ball_lenght5  " title="'+result.ge+'">'+result.ge+'</span></td><td class="count">'+result.count+'</td><td class="gray">'+result.isdan+'</td><td class="blue">'+result.isxiao+'</td><td class="gray">'+result.longhu+'</td></tr>';

  $('#reslist').append(item);

  });

  }

});

}

setInterval(autoPlay,5000); //每隔5秒 刷新一次

});

</script>

下面是PHP代码用的是PHPCMS 随便搞了下

//JSON&nbsp;输出&nbsp;自定义
	public&nbsp;function&nbsp;jsonlist()&nbsp;{
		$id&nbsp;=&nbsp;intval($_POST[&#39;id&#39;]);
		$where&nbsp;=&nbsp;&#39;&#39;;
		if($id){
			$where&nbsp;=&nbsp;&#39;&nbsp;and&nbsp;a.id&gt;&#39;.$id;
		}
		$sql&nbsp;&nbsp;=&nbsp;&quot;SELECT&nbsp;*&nbsp;FROM&nbsp;`v9_ticai`&nbsp;a,`v9_ticai_data`&nbsp;b&nbsp;WHERE&nbsp;a.id=b.id&nbsp;AND&nbsp;a.status=99&nbsp;$where&nbsp;order&nbsp;by&nbsp;a.id&nbsp;desc&quot;;
		$qsql&nbsp;=&nbsp;$this-&gt;db-&gt;query($sql);
		$list&nbsp;=&nbsp;$this-&gt;db-&gt;fetch_array();
		foreach($list&nbsp;as&nbsp;$vo){
			$data[&#39;count&#39;]&nbsp;=&nbsp;$vo[&#39;wan&#39;]+$vo[&#39;qian&#39;]+$vo[&#39;bai&#39;]+$vo[&#39;shi&#39;]+$vo[&#39;ge&#39;];
			$data[&#39;wan&#39;]&nbsp;=&nbsp;$vo[&#39;wan&#39;];
			$data[&#39;qian&#39;]&nbsp;=&nbsp;$vo[&#39;qian&#39;];
			$data[&#39;bai&#39;]&nbsp;=&nbsp;$vo[&#39;bai&#39;];
			$data[&#39;shi&#39;]&nbsp;=&nbsp;$vo[&#39;shi&#39;];
			$data[&#39;ge&#39;]&nbsp;=&nbsp;$vo[&#39;ge&#39;];
			$data[&#39;isdan&#39;]&nbsp;=&nbsp;$vo[&#39;isdan&#39;];
			$data[&#39;isxiao&#39;]&nbsp;=&nbsp;$vo[&#39;isxiao&#39;];
			$data[&#39;longhu&#39;]&nbsp;=&nbsp;$vo[&#39;longhu&#39;];
			$data[&#39;title&#39;]&nbsp;=&nbsp;$vo[&#39;title&#39;];
			$data[&#39;shijian&#39;]&nbsp;=&nbsp;$vo[&#39;shijian&#39;];
			$data[&#39;id&#39;]&nbsp;=&nbsp;$vo[&#39;id&#39;];
			
			$array[]&nbsp;=&nbsp;$data;
		}
		echo&nbsp;json_encode(array(&#39;list&#39;=&gt;$array,&#39;code&#39;=&gt;&#39;1&#39;,&#39;sql&#39;=&gt;$sql));

	}

//JSON 输出 自定义

public function jsonlist() {

$id = intval($_POST['id']);

$where = '';

if($id){

$where = ' and a.id>'.$id;

}

$sql  = "SELECT * FROM `v9_ticai` a,`v9_ticai_data` b WHERE a.id=b.id AND a.status=99 $where order by a.id desc";

$qsql = $this->db->query($sql);

$list = $this->db->fetch_array();

foreach($list as $vo){

$data['count'] = $vo['wan']+$vo['qian']+$vo['bai']+$vo['shi']+$vo['ge'];

$data['wan'] = $vo['wan'];

$data['qian'] = $vo['qian'];

$data['bai'] = $vo['bai'];

$data['shi'] = $vo['shi'];

$data['ge'] = $vo['ge'];

$data['isdan'] = $vo['isdan'];

$data['isxiao'] = $vo['isxiao'];

$data['longhu'] = $vo['longhu'];

$data['title'] = $vo['title'];

$data['shijian'] = $vo['shijian'];

$data['id'] = $vo['id'];

$array[] = $data;

}

echo json_encode(array('list'=>$array,'code'=>'1','sql'=>$sql));

}

到此结束此方法可能不是好的，如果您有更好的方法可以留言交流！

JQ ajax间隔刷新显示最新更新数据

今天又涨见识了！没做对不起家人的事情！

联通物联网、电信物联网接触

参与评论

快速导航

JQ ajax间隔刷新 显示最新更新数据

分享本文封面

相关文章

参与评论

登录

快速导航

JQ ajax间隔刷新显示最新更新数据