进度条从ajax更改值

时间:2014-01-18 15:24:57

标签: jquery ajax

的Javascript

<script type="text/javascript">
var checkScores =  function () {
    $.ajax({
        url: 'http://127.0.0.1/ProgVsProg/main/countScoreCh',
        success: function(response) {

      //some code

        }
    });
}
  $(function() {
     $( "#progressbar" ).progressbar({
    value: 50
 });
 });

</script>

控制器

public function countScoreCh(){
    $id = $this->session->userdata('userID');
    $data['getScore'] = $this->lawmodel->battleUserID($id);
    foreach($data['getScore'] as $row){
        $scoreCH = $row->challengerScore;
        echo json_encode(
        array(
        'scoreCH' => $scoreCH,
                )
            );
    }
}

EDITED

 <script type="text/javascript">
var checkScores =  function () {
    $.ajax({
        url: 'http://127.0.0.1/ProgVsProg/main/countScoreCh',
        success: function(response) {

      //some code that will be call to the progressbar value:

        }
    });
}
  $(function() {
     $( "#progressbar" ).progressbar({
    value: //the value will be base on the result of the controller $scoreCH
 });
 });

</script>

如何根据控制器的输出更新进度条上的值? 因为控制器使用json_encode。如果控制器输出为50,则进度条的值将更改为50。

需要帮助..我不知道json_encode是否是使用它的正确方法....但任何解决方案都可以..

1 个答案:

答案 0 :(得分:0)

您需要从ajax调用中获取json并在progressbar对象上应用值data.progress

简短的例子:

var checkScores =  function () {
    $.ajax({
        url: 'http://127.0.0.1/ProgVsProg/main/countScoreCh',
        success: function(response) {
        dataType: "json", // data type json
        success: function(data){
            var progress = data.progess;
            $( "#progressbar" ).progressbar({
                value: progress
            });
        }


        });
    });

然后你的PHP看起来像

public function countScoreCh(){
    $id = $this->session->userdata('userID');
    $data['getScore'] = $this->lawmodel->battleUserID($id);
    foreach($data['getScore'] as $row){
        $scoreCH = $row->challengerScore;
        echo json_encode(
            array(
                'scoreCH' => $scoreCH,
                'progress' => 50
            )
        );
    }
}