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

Posted 2023-03-14

【中文标题】php Laravel Ajax 无法在视图中加载多个对象数据

【英文标题】：php Laravel Ajax couldn't load muliple object data in View

【发布时间】：2016-08-27 04:18:01

【问题描述】：

这里的场景是， 我想显示一些学生数据，用户可以在其中选择学生用户名，学生相关数据将加载到视图页面中。 问题是学生数据被加载，但它只显示最后一个数组的数据。 例如。一个学生有两门课程有成绩。虽然我只选择该学生的最后一门课程，但他选择的相关数据并未与其他人一起显示。

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

我该如何解决这个问题？

路线如下：

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】：

我认为你的问题在于这段代码：

$.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);

);

你得到一个数据数组，但由于你使用的是 jquery.each 方法，你只是覆盖了表行中的值（因为只有一行）。

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

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>');
    );

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

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

来实现

 $("#example").empty();

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

【讨论】：

你上面的代码的问题是它没有删除以前的值意味着当我选择另一个学生时它添加了现有的值。

已更新答案，请参阅答案中的编辑