Ajax如何是实现数据库中数据更新实时的显示在浏览器上
[问题点数：20分，结帖人xuhuanwang_210]
本版专家分：20
结帖率 66.67%
CSDN今日推荐
本版专家分：112
本版专家分：13243
本版专家分：20
结帖率 66.67%
匿名用户不能发表回复！|
CSDN今日推荐每天一小步，未来一大步
ajax实时更新数据
实现功能：
显示试题结果，并实时更新各题各选项选择人数
示例代码：
控制器 SurveyController.php
public function getResult($id){
$oSuvey = Suvey::find($id);
if(!$oSuvey){
return json_encode(array('success'=&false,'msg'=&'该调研不存在'));
$oQuestions = Question::where('sid', $id)
-&select('id', 'sid', 'name', 'a', 'a_ct','b', 'b_ct','c','c_ct', 'd','d_ct')
$aSelection=array('a','b','c','d');
return View::make('show-result')
-&with(compact('id', 'oQuestions','aSelection'));
public function postResult($id){
$oQuestions = Question::where('sid', $id)
-&select('id', 'sid', 'name', 'a', 'a_ct','b', 'b_ct','c','c_ct', 'd','d_ct')
$aSelection = array('a','b','c','d');
return json_encode(
'success'=&tue,
'oQuestions' =& $oQuestions-&toArray(),
'aSelection' =& $aSelection
视图文件 show-result.blade.php
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&试题&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&
&body class="blue_wrapper"&
&input type="hidden" id="url" value="{{url()}}/survey/result/{{$id}}" /&
@foreach($oQuestions as $k=&$question)
&div class="check_box"&
&div class="check_pro"&{{$k+1}}、{{$question-&name}}&/div&
@foreach($aSelection as $selection)
@if($question-&$selection)
&div class="check_list"&{{strtoupper($selection)}}、{{$question-&$selection}}&/div&
&div class="progress_box"&
&div class="p_tot"&
&div class="progress1"&&/div&
&div class="progress2" id="&?php echo $selection.'_ct'.($k+1);?&" style="width:&?php $rate = $selection.'_ct';echo $question-&$rate*1.24.'%';?&"&&/div&
&span class="percent" id="&?php echo $selection.'_ct_'.($k+1);?&"&&?php $rate = $selection.'_ct';echo $question-&$?&人&/span&
@endforeach
result.js – 实现实时更新数据
$(function(){
function showResult(){
type: "POST",
url:$('#url').val(),
dataType: "json",
async: true,
cache: false,
timeout:'30000',
success: function(data) {
if(data.success){
var oQuestions = data.oQ
var aSelection = data.aS
var i = 1;
var j = 0;
var len = oQuestions.
var num = aSelection.
var obj = '';
for(; i &= i++){
for(; j & j++){
obj = document.getElementById(aSelection[j]+'_ct'+i);
obj.style.width = oQuestions[i-1][aSelection[j]+'_ct']*1.24+'%';
$('#'+aSelection[j]+'_ct_'+i).html(oQuestions[i-1][aSelection[j]+'_ct']+'人');
setInterval(function(){showResult();}, 30000);
效果如图：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！博客分类：
&!DOCTYPE HTML&&html& &head&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&Highcharts Example&/title&
&script type="text/javascript" src="&
&script type="text/javascript"&
var categories=&%=categories%&;
var data=&%=data%&;
//创建图表
$(document).ready(function() {
chart = new Highcharts.Chart( {
renderTo : 'container',
type : 'bar',
events : {
load : st// 定时器
text : '动物数量统计'
categories : categories,
text : 'name'
text : 'number'
enabled: false
tooltip : {
formatter : function() {
return '' + this.series.name + ': ' + this.y + '';
credits : {
enabled: false
plotOptions : {
series : {
stacking : 'normal'
series : [ {
name : '个',
data : data
//10秒钟刷新一次数据
function st() {
setInterval("getData()", 10000);
//动态更新图表数据
function getData() {
var categories = [];
type: "post",
url: "${pageContext.request.contextPath}/demo/chart_demo.action",
dataType: "json",
success : function(data){
var d = [];
$(data).each(function(n,item){
d.push(item.data);
categories.push(item.categories);
chart.series[0].setData(d);
chart.xAxis[0].setCategories(categories);
&/script& &/head& &body&&script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts.js" charset="utf-8"&&/script&&script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/funnel.js"&&/script&&script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts-more.js"&&/script&
&div id="container" &&/div& &/body&&/html&
没有iteye帐号的朋友想要压缩实例的致邮给我
我的邮箱：
描述: 无密码
下载次数: 450
浏览 31744
shiguili505116
浏览: 49775 次
来自: 北京
很不错感谢分享
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'table 如何定时更新数据库的数据呢？ - Fly社区
table 如何定时更新数据库的数据呢？
 724
悬赏：20飞吻
版本：layui 2.x 浏览器：chrome
layui table 我想实时更新数据，5秒钟更新显示数据库的数据变化有什么好的方法最好是刷新时候 页面不闪 能像ajax一样 局部更新变化数据我开始用setInterval （function{ table.reload //这种方式 页面会闪}，5000） 重新加载 体验不是很好 请问大家 有什么高招 谢各位大神！
除了定时器 没有更好的方法
@ 我是想说 怎么能让页面在刷新的时候 不闪动
@ 能不能给个例子 不是很明确啊 我该怎么把ajax 返回的json 加载到表格上呢？
表格重载本身就是对数据表格发送请求后再重新渲染一次，刷新的只是表格，而不是页面。所以降低用户体验用定时器+table.reload()是最有效的
首先你得使用ajax进行数据加载，然后使用定时器定时调用ajax数据加载，但是不建议5秒刷新一次，最起码15秒一次。否则如果网络波动很可能会一起浏览器假死！
@ 不知道你的闪动是怎么样的，一般情况内容变动引起页面高低变化 的闪动可以固定高度和宽 来降低视觉差异化
@ 这里面的reload 是reload所有表的属性 以前用easyui 可以reload url 所以体现的是数据刷新 而不是整个表刷新 那样效果会好一些 不知道这里有没有 只reload url 的方法
@ 谢谢 您的回复 我试着用ajax 获取json 数据 但是获取数据 写入表的data中， 数据没有显示 不知道为什么 我看了一下官方的说明 我是按照给定的data 格式传的数据
本帖已设置禁止回复
心级赞助商 -
微信扫码关注 layui 公众号Ajax怎么实现异步刷新数据_百度经验
&&&&&&&&&电脑软件Ajax怎么实现异步刷新数据
百度经验:jingyan.baidu.com&【Ajax 实现异步刷新数据】简单地说Ajax 他不是一门语言而是一集js+xml的技术， 主要实现在不用刷新页面的情况到和用务器进行数据交付，从而达到良好的用户体验。在了解Ajax之前你应该先对 Html , Xml, CSS , Javascript 等一些网页前端技术有所了解。如何实现局部刷新首先应该在页面头部写一个js函数，例如：&head&&script type="text/javascript"&function TestAjax(){&$.ajax({&&&&&&& url: 'ajax.aspx ' //访问路径&&&&&& data: 'cmd=' + 'clickme' + '&TxtMs=' + $("#TxtMs").val() + "&TxtMr=" + $("#TxtMr1").val()&&& + "&TxtMemorial2=" + $("#TxtMemorial3").val(), //需要验证的参数,这里可以带多个参数，你可以设置第一个参数据来区别这个方法是执行那种操作。&&&&&&& type: 'post', //传值的方式&&&&&&& error: function () {//访问失败时调用的函数&&&&&&&&&&& alert("链接服务器错误！");&&&&&&& },&&&&&&& success: function (msg) {//访问成功时调用的函数,这里的msg是Login.ashx返回的值&&&&&&&&&&& // alert(msg);&&&&&&&&&&& if (msg == 0) {&&&&&&&&&&&&&&& alert("提示\n\n提交失败,！");&&&&&&&&&&& }}//关于返回值，后台Response.Write("0"); 可以这样返回过来，以判断是否成功。&/script&&/head&此函数需要调用js 类库，如：&&script type="text/javascript" src="/js/jquery-1.4.2.min.js"&&/script&调用这个函数&div onclick="TestAjax();"&Check me !&/div&&当然实现ajax 方法有很多种，此为一种，供大家参考。经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(8)已投票(8)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验03612300热门杂志第1期你不知道的iPad技巧3795次分享第1期win7电脑那些事6649次分享第2期新人玩转百度经验1413次分享第1期Win8.1实用小技巧2657次分享第1期小白装大神1932次分享◆请扫描分享到朋友圈