php Laravel Ajax无法在View中加载多个对象数据

时间:2016-05-02 11:52:20

标签: php jquery ajax laravel laravel-5.2

这里的情景是, 我想向学生展示一些用户可以选择学生用户名的数据,学生相关数据将被加载到视图页面中。 问题是学生数据被加载但它只显示最后一个数组的数据。 例如。一个学生有两个年级的课程。虽然我选择该学生只选择了最后一门课程,但他选择的相关数据并未与他人合作。

当我在控制台中查看时,我可以看到所有结果,但不在我的视图页面中。

如何解决问题?

这是路线:

Route::get('/viewResultPage',[
    'uses'=>'ResultController@viewResultPage',
    'as'=>'viewResultPage'
    ]);

这是控制器:

 public function ajax_student_result(Request $request)
    {
            $std_id= $request->input(['std_id']);
         $student = DB::table('results')->join('grades','results.grade_id', '=','grades.id')
           ->join('courses', 'results.course_id', '=', 'courses.id')
           ->join('students', 'results.student_id', '=', 'students.id')
           ->join('departments','students.department_id','=','departments.id')
           ->where('students.id', $std_id)                      
           ->selectRaw('students.name,students.email,departments.name as d_name,
             courses.name as c_name,courses.code as c_code,grades.grade')
           ->get();

            return \Response::json($student); 
    }

这是Ajax的视图页面:

<div class="container" >
            <h3> View Result </h3>



        <div class="form-group">
            <label for="">Student Reg No.</label>
            <select class="form-control input-sm" required id="student" name="student_id" >
            <option>Select a Student</option>
            @foreach($student as $row)
            <option value="{{$row->id}}">{{$row->registraion_number}}</option>
            @endforeach
            </select>
        </div>   

       <div class="form-group">
        <label>Name</label>
         <input type="text" name="name" id="name" class="form-control"  >
        </div>

        <div class="form-group">
          <label>Email</label>
          <input type="text" name="email" id="email" class="form-control"  >
        </div>

        <div class="form-group">
          <label>Department</label>
          <input type="text" name="department" id="department" class="form-control"  >
        </div>

        <table  class="table table-striped table-bordered"  id="example">
        <thead>
          <tr>
            <td>Serial No</td>
            <td>Course Code</td>
            <td>Name</td>
            <td>Grade</td>                      
          </tr>
        </thead>
        <tbody>
        <?php $i=1; ?>       
           @foreach ($student as $row)
          <tr>
            <td>{{$i}}</td>
            <td id="code"></td>
            <td id="course_name"></td>
            <td id="grade"></td>         
          </tr>
           <?php $i++; ?>             
        @endforeach
        </tbody>
      </table>          
        </div>


    <script type="text/javascript">
         $('#student').on('change',function(e){       

           var std_id = $('#student option:selected').attr('value');

          $.ajaxSetup({
                      headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                      });

                   $.ajax({ 
                      type: "POST", 
                      url : "{{url('ajax-student-result')}}",
                      data:{std_id:std_id},
                    success : function(data) {                  
                  $.each(data,function(index,subcatObj){
                    $('#name').val(subcatObj.name); 
                    $('#email').val(subcatObj.email); 
                    $('#department').val(subcatObj.d_name);

                    $('#code').html(subcatObj.c_code);
                    $('#course_name').html(subcatObj.c_name);
                    $('#grade').html(subcatObj.grade);

                    });
                   } 

                  });

       });
    </script>  

1 个答案:

答案 0 :(得分:0)

我认为您的问题在于此代码:

<InstallExecuteSequence>
            <Custom Action="myCustomAction" After='AppSearch' ></Custom>
</InstallExecuteSequence>

您获得了一个数组数组,但由于您使用的是jquery.each方法,因此只覆盖表行中的值(因为只有一行)。

如果要显示所有数组数据,则应在表中追加新行,例如:

$.each(data,function(index,subcatObj){
    $('#name').val(subcatObj.name); 
    $('#email').val(subcatObj.email); 
    $('#department').val(subcatObj.d_name);

    $('#code').html(subcatObj.c_code);
    $('#course_name').html(subcatObj.c_name);
    $('#grade').html(subcatObj.grade);

});

这将在表中为数组中的每个键创建新行

编辑:您还需要在选择新学生时清空表格。 这可以通过

来实现
success : function(data) {
    // First empty table   
    $("#example").empty();

    // Populate table with student info and courses
    $.each(data,function(index,subcatObj) {
        $('#example tbody').after('<tr><td>'+subcatObj.name+'</td></tr>'+ ... +'<tr><td>'+index+'</td><td id="code">'+subcatObj.c_code+'</td> ... </tr>');
    });
}

这就是为什么我在ajax回调的成功函数中添加了这一行