Question

问题出现在学生搜索领域。当具有相同名字和姓氏的学生人数大于1-而不是添加另一个表行时，该表将刷新。

关于控制器中的功能：搜索显示结果，然后 userGroup 检查学生是否属于用户有权访问的组

 $(document).ready(function(){
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });

    $('#query').on('keyup',function(event){

        $('#results').html();
        var query = $(this).val();

        var errorInfo = () => {
            $('.student-results-table').hide();
            $('#no-result').show();
            var noResult = `
            <b>try again</b>
            `;
            $('#no-result').html(noResult);

        };


        var successInfo = (value, group) => {
            $('#no-result').hide();
            $('.student-results-table').show();

            var result = `
            <tr>
            <td> ${value.firstname}  </td>
            <td> ${value.lastname}  </td>
            <td> ${value.indexNumber}  </td>
            <td> ${group.group}  </td>
            <td>  <a href="/students/${value.id}"> 
            <i class="far fa-list-alt fa-lg" ></i>
            </a></td>
            </tr>
            `;
            $('#results').empty();
            $('#results').append(result);

        };


        $.ajax({
            url:"/search-students",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(students)
            {

            $.each(students.students, function( index, value ){

            $.ajax({
                url:`/user-group/${value.group_id}`,
                        method:'GET',
                        data:{id:value.group_id},
                        dataType:'json',
                        success:function(group)
                        {
                            if(group.success == 'true') successInfo(value, 
    group);
                        },
                        error:errorInfo()
                    });
                });

            },
            error:errorInfo()

        });


        });


    });
// /search-students


public function search(Request $request)
    {
    $query = $request->get('query');
    $data = explode(' ', $query);
    $students = Student::where('firstname', 'LIKE', '%'.$data[0].'%')
        ->where('lastname', 'LIKE', '%'.$data[1].'%')->get();
        if(count($students) > 0) {
            return response()->json(['students'=>$students]);

        } else {
            $message = "Student does not exist";

            return response()->json(['error'=>$message]);
        }   
    }

// /user-group/id
public function userGroup($id = null) 
{
    if(Group::userGroup($id)) {
    $group = Group::findOrFail($id);
    return response()->json(['success'=>'true',
     'group'=> $group->name]);
    } else {
        return response()->json(['error'=>'true']);
    }
}

Answer 1

我认为您的问题是由执行$（'＃results'）。empty（）;引起的。在SuccessInfo函数中。您应该在调用该函数之前执行此操作，以便清除表，然后调用该函数以附加每个值：

 $(document).ready(function(){
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });

    $('#query').on('keyup',function(event){
        $('#results').html();
        var query = $(this).val();

        var errorInfo = () => {
            $('.student-results-table').hide();
            $('#no-result').show();
            var noResult = `
            <b>try again</b>
            `;
            $('#no-result').html(noResult);
        };

        var successInfo = (value, group) => {
            $('#no-result').hide();
            $('.student-results-table').show();

            var result = `
            <tr>
            <td> ${value.firstname}  </td>
            <td> ${value.lastname}  </td>
            <td> ${value.indexNumber}  </td>
            <td> ${group.group}  </td>
            <td>  <a href="/students/${value.id}"> 
            <i class="far fa-list-alt fa-lg" ></i>
            </a></td>
            </tr>
            `;
            $('#results').append(result);
        };

        $.ajax({
            url:"/search-students",
            method:'GET',
            data:{ query:query },
            dataType:'json',
            success:function(students) {

            $.each(students.students, function( index, value ){
                $.ajax({
                    url:`/user-group/${value.group_id}`,
                    method:'GET',
                    data:{id:value.group_id},
                    dataType:'json',
                    success:function(group) {
                        if (group.success == 'true') {
                            $('#results').empty();
                            successInfo(value, group);
                        }
                    },
                    error: errorInfo()
                    });
                });
            },
            error: errorInfo()
        });
    });
});

ajax多次附加一个结果

1 个答案: