Laravel 中 AJAX 请求未收到 JSON 响应的问题

Question

由于我是 Laravel 新手，所以在观看 YouTube 教程后尝试了此操作。

我只是很困惑，不知道我在做什么..

我认为这可能是一个简单的错误，这就是为什么我直接在此处包含一些代码...我想您只需查看就可以轻松识别问题..

我直接添加了这段代码，所以它可能不清楚并且可能会引起一些混乱。我将其包括在内是为了帮助识别问题。如果有人需要更清晰的信息，请告诉我。对于没有共享完整的正确代码库表示歉意。因为，然后我想我必须添加很多代码。

我正在尝试做什么- 我正在尝试在 Laravel 中使用 AJAX 更新用户配置文件。当我提交表单时，我看到屏幕上显示原始数据（附有屏幕截图），但我的 AJAX 调用中的成功和错误条件没有得到遵循。

数据已正确存储在数据库中，但响应未传递给 AJAX 函数。它会在屏幕上显示该响应，如附图所示

user_profile.blade.php - 查看文件

  <form id="userForm" class="form fv-plugins-bootstrap5 fv-plugins-framework" action="{{ route('update-profile') }}" method="POST" name="userForm">
@csrf
@method('PUT') 
{{ -- Input field --}}
</form>

用户配置文件控制器

 public function updateProfile(Request $request)
    {

        $id = Auth::user()->id;

        // Validate the request data
        $validator = Validator::make($request->all(), [
            'fname' => 'required',
            'lname' => 'required',
            'email' => 'required|email|unique:users,email,' . $id . ',id',
        ]);
        
        if ($validator->passes()) {
            // Update user details
            $user = User::find($id);
            $user->fname = $request->fname;
            $user->lname = $request->lname;
            $user->email = $request->email;
            $user->save();
            
            // Check if profile exists and update it
            $profile = $user->profile;


            if ($profile) {

                $profile->update([
                    'fname' => $request->fname,
                    'lname' => $request->lname,
                    'email' => $request->email,
                    'gender' => $request->gender, // Assuming gender is included in the form
                    'country' => $request->country,
                    'state' => $request->state,
                    'district' => $request->district,
                    'phone_no' => $request->phone_no,
                    'pincode' => $request->pincode,
                    'address' => $request->address,
                    'date_of_birth' => $request->date_of_birth,
                    
                ]);
            } else {

                 // Create a new profile
                $profileData = [
                    'user_id' => $user->id,
                    'fname' => $request->fname,
                    'lname' => $request->lname,
                    'email' => $request->email,
                ];

                UserProfile::create($profileData);
            }
            
>! I THINK THIS RESPONSE IS NOT BEING PASSED INTO THAT AJAX>!             
            return response()->json([
                'status' => true,
                'errors' => []
            ]);
        } else {
            return response()->json([
                'status' => false,
                'errors' => $validator->errors()
            ]);
        }
    }
    

**这是ajax **

<script   
$('#userForm').submit(function(e) {
                e.preventDefault();

  $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
    
                $.ajax({
                    url: "{{ route('update-profile') }}",
                    type: "PUT",
                    dataType: 'json',
                    data: $("#userForm").serializeArray(),  // Spoof PUT method

                    success: function(response) {
                        let errors = response.errors;  // Moved the errors initialization here
    
                        if (response.status == true) {
                            // success logic
                            window.location.href = "{{ route('update-profile') }}";
                        } else {
                            // error handling
                            if(errors.fname) {
                                $("#fname").addClass("is-invalid")
                                .siblings('p')
                                .addClass("invalid-feedback")
                                .html(errors.fname);
                            } else {
                                $("#fname").removeClass("is-invalid")
                                .siblings('p')
                                .removeClass("invalid-feedback")
                                .html('');
                            }
    
                            // Other error messages
                        }
                    }
                });
            });
        });
    </script>

路线

// GROUP ROUTES
Route::group(['prefix' => 'account'], function() {

    // Guest Middleware
    Route::group(['middleware' => 'guest'], function() {
      // Other routes
    });

    // Authenticated Middleware
    Route::group(['middleware' => 'auth'], function() {

        Route::get('/user-profile', [UserProfileController::class, 'index'])->name('user-profile'); // display user profile page

        Route::put('/user-profile/update', [UserProfileController::class, 'updateProfile'])->name('update-profile');
   
    });
});

Answer 1

在初始 AJAX 请求成功后，您似乎再次进行不必要的调用来更新路线：

if (response.status == true) {
   // success logic
   window.location.href = "{{ route('update-profile') }}";
}

这里发生的情况是，您的第一个提交操作第一次调用

update-profile

，它将

response.status

返回为

true

，并且因为满足

response.status == true

条件，所以再次调用相同的更新操作，这就是为什么您在浏览器中看到

json

响应。更新该逻辑，使其变为

/user-profile

：

window.location.href = "{{ route('user-profile') }}";