在ajax

时间:2017-04-03 13:28:33

标签: javascript ajax twitter-bootstrap-3 codeigniter-3

我在控制器中有一个函数,它将返回一个包含dataBase数据的数组,该数据将作为json文件发送到我的success函数, 我想在我的模态中显示div中的那些信息,我不能这样做,所以这是我的控制器功能:

public function list_salle($id)
{

$data= $this->salle_model->get_all_salle($id);


     $this->output->set_output(json_encode($data));
          }

这是我的js函数及其ajax:

function consulter_salle(id)
        { 

                           $.ajax({
                url : "<?php echo site_url('index.php/batiment/list_salle')?>/"+id,
                type: "POST",
                dataType: "JSON",
                success: function(data)
                { 

                   var table_header = "<table class='table table-striped table-bordered'><thead><tr><td>head_x</td><td>head_y</td></tr></thead><tbody>";
                   var table_footer = "</tbody></table>";
                var html ="";



                                for (row in data)       
                {
                    html += "<tr><td>"+data.id +"</td><td>"+data.libelle+"</td></tr>";
            }

                var all = table_header +html+ table_footer;



        // show bootstrap modal when complete loaded
                $('.modal-title').text('Test');
                $('#salle_list').html(all);
                            $('#modal_list').modal('show');

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error displaying data');
                }
            });

        }

这是我的模态:

 <div class="modal fade" id="modal_list" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Liste des salles</h3>
          </div>
          <div class="modal-body form">
            <form action="#" id="form" class="form-horizontal">

              <div class="form-body">
          <div id="salle_list"></div>


              </div>
              </form>
              <div class="modal-footer">
                <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div>
    </div>

所以数据作为json文件正确发送,但我无法显示它,我认为循环中的问题和.html函数,请帮助 谢谢!

2 个答案:

答案 0 :(得分:0)

你在ajax中的for循环看起来应该是一个foreach,但即使这样它也是错的。您正在迭代json对象,如果您想要一些替代方法,请查看此问题:How do I iterate over a JSON structure?。一个答案给出了这样一个循环:

$(jQuery.parseJSON(JSON.stringify(data))).each(function() {  
    html += "<tr><td>"+this.id +"</td><td>"+this.libelle+"</td></tr>";
}

答案 1 :(得分:0)

我找到了解决方案:

  success: function(data)
                {  



                   var table_header = "<table class='table table-striped table-bordered'><thead><tr><td>Identifiant</td><td>Libelle</td></tr></thead><tbody>";
                   var table_footer = "</tbody></table>";
                var html ="";

               data.forEach(function(element) {
              html += "<tr><td>"+element.id +"</td><td>"+element.libelle+"</td></tr>";
            });



                var all = table_header +html+ table_footer;

                $('.modal-title').text('Liste des salles');

                $('#salle_list').html(all);
                            $('#modal_list').modal('show');

                }