laravel：ajax请求没有可用的响应

Question

我是 laravel 的新手，我已经被这个问题困扰了好几个小时——“”此请求没有可用的响应数据“”。我研究了一些相关问题，但仍然无法找到解决方案。

我有一个自动完成搜索，它在 <a> 标记内显示学生列表，该标记具有 onclick 函数以显示带有所选学生详细信息的模式。自动完成搜索工作正常，当我点击<a> 标签时，模式弹出但不显示所选学生的详细信息。

我正在使用 ajax 来获取学生的详细信息并将其显示在模式上。我检查了网络状态，它显示“此请求没有可用的响应数据”。如何解决这个问题？非常感谢任何帮助。

这是我的自动完成搜索的样子，然后用户将单击所选学生以打开模式并显示学生的详细信息。

//My route
Route::group(['middleware' => 'auth'], function(){
Route::get('violation_entry', ['as' => 'violation_entry', 'uses' => 'ViolationEntryController@index']);
Route::get('violation_entry/fetch', ['as' => 'violation_entry.fetch', 'uses' => 'ViolationEntryController@fetch']);
Route::get('violation_entry/form', ['as' => 'violation_entry.form', 'uses' => 'ViolationEntryController@form']);});


//(My ViolationEntryController@fetch Controller) 
//this is the searched result that triggers the display of modal when clicked using onclick="violationForm()" 
function foreach($data as $student){
    $output .= '<div class="row">
                    <div class="col-lg-8 col-md-12 col-sm-12" >
                        <a href="#" onclick="violationForm()" id="'.$student->student_id.'" class="violationFormStudent list-group-item list-group-item-action d-flex justify-content-start text-decoration-none">
                            <div class="student_image_div mr-3">
                                <img class="student_img" src="../paper/img/students_images/default_student_image.jpg" alt="Student Image">
                            </div>
                            <div class="student_details_div">
                                <p class="student_name_txt">'.$student->last_name.', '.$student->first_name.'</p>
                                <p class="student_number_txt text-dark">'.$student->student_id.' <span class="text-muted"> | '.$student->course.'-'.$student->section.' | '.$student->school.' </span></p>
                            </div>
                        </a>
                    </div>
                </div>
            '; 
}


//(index.blade.php view) 
//this is the ajax request to fetch student's details and show modal
    <script>
        function violationForm(){
           var query = $(this).attr('id');
           $.ajax({
               url:"{{ route('violation_entry.form') }}",
               method:"GET",
               data:{query:query},
                   success:function(data){
                       $('#violationEntryForm').modal('show');
                       $('#studentDetails').html(data);  
                   }
           });
        };
    </script>


//(My ViolationEntryController@form Controller) 
//get ajax request and fetch student's information
function form(Request $request)
{
    if($request->get('query')){
        $query = $request->get('query');
        $student = Students::where('student_id', $query)->first();

        $output ='
            <div class="student_img_div_modal mr-4">
                <img class="student_img_modal" src="../paper/img/students_images/default_student_image.jpg" alt="">
            </div>
            <div class="student_details_div_modal">
                <p class="student_id_txt_modal">'.$student->student_id.'</p>
                <p class="student_name_txt_modal">'.$student->first_name.' '.$student->last_name.'</p>
                <p class="student_details_txt_modal">'.$student->course.'-'.$student->section.' | '.$student->school.'</p>
            </div>

        ';
        echo $output;
    }
}

这是我的模态的预期输出

这是不显示学生信息的最终输出

以下是我的网络状态截图

为什么会显示“此请求没有可用的响应数据”？

Answer 1

在您的控制器中：

return response()->json(['result' => $output]);

在您的 javascript 中：

function violationForm(){
           var query = $(this).attr('id');
           $.ajax({
               url:"{{ route('violation_entry.form') }}",
               method:"GET",
               data:{query:query},
                   success:function(data){
                       $('#violationEntryForm').modal('show');
                       $('#studentDetails').html(data.result);  
                   }
           });
        };

请记住，您使用控制器的方式可能会遇到没有响应的情况！

Answer 2

我不确定发生了什么，但首先是您使用的是 Symfony ->get() 方法，该方法专为输入（POST 请求）而设计。您需要使用$request->query() 来获取查询字符串。但是，在您上面的评论中，如果您粘贴了整个内容，看起来您的查询字符串没有被附加。你还需要一个默认的返回方法，如果找不到 id 会发生什么。我会将它全部包装在一个 try/catch 块中，但这取决于您喜欢的任何内容。添加else 语句至少会向您的页面返回错误，而不是您得到的错误。

Answer 3

网络告诉我“请求没有可用的响应数据”的原因是var query = $(this).attr('id'); 并没有真正得到我的<a id="'.$student->student_id.'">，我试过console.log(query); 就像lewis4u 说了什么，但它返回一个 UNDEFINED 变量。我找到了一个替代函数，可以从此链接获取我的<a> id 的属性 - JavaScript - onClick to get the ID of the clicked button

所以我用这个onclick="violationForm(this.id)" 更改了我的<a> 标记onClick() 函数，并从此更改了我的脚本：

 <script>
    function violationForm(){
       var query = $(this).attr('id');
       $.ajax({
           url:"{{ route('violation_entry.form') }}",
           method:"GET",
           data:{query:query},
               success:function(data){
                   $('#violationEntryForm').modal('show');
                   $('#studentDetails').html(data);  
               }
       });
    };
</script>

到这里：

<script>
    function violationForm(student_id){
        $.ajax({
            url:"{{ route('violation_entry.form') }}",
            method:"GET",
            data:{student_id:student_id},
                success:function(data){
                    $('#violationEntryForm').modal('show');
                    $('#studentDetails').html(data);
                }
        });
    };
</script>

现在它可以正常工作了。谢谢你们的回答。高度赞赏。