ajax实时更新数据

最新推荐文章于 2024-08-11 21:47:18 发布

kirsten_z

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量8.8k

点赞数 4

分类专栏： php 框架 jquery 文章标签： ajax

本文链接：https://blog.csdn.net/kirsten_z/article/details/56840175

版权

php 同时被 3 个专栏收录

60 篇文章 0 订阅

订阅专栏

框架

33 篇文章 0 订阅

订阅专栏

jquery

27 篇文章 0 订阅

订阅专栏

实现功能：
显示试题结果，并实时更新各题各选项选择人数

示例代码：
控制器 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')
                             ->get();
        $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')
                             ->get();
        $aSelection = array('a','b','c','d');
        return json_encode(
                array(
                        '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">
<head>
<meta http-equiv="Content-Type" content="text/html; 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" />
</head>
<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>
            </div>
            <span class="percent" id="<?php echo $selection.'_ct_'.($k+1);?>"><?php $rate = $selection.'_ct';echo $question->$rate;?>人</span>
        </div>
        @endif 
        @endforeach
    </div>
</body>
</html>

result.js – 实现实时更新数据

//实时更新数据
$(function(){
    function showResult(){
        $.ajax({
            type: "POST",
            url:$('#url').val(),
            dataType: "json",
            async: true,
            cache: false,
            timeout:'30000',//请求超时时间
            success: function(data) {
                if(data.success){
                    var oQuestions = data.oQuestions;
                    var aSelection = data.aSelection;
                    var i = 1;
                    var j = 0;
                    var len = oQuestions.length; 
                    var num = aSelection.length;
                    var obj = '';
                    for(; i <= len; i++){
                        for(; j < num; 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']+'人');
                        }
                        j = 0;
                    }
                }
            }
        });
    }
    //循环操作
    setInterval(function(){showResult();}, 30000);      
});