使用 AJAX Laravel 更新会话而不重新加载页面

Question

我正在开发一个购物车系统，这是我正在尝试制作的一种蓝图。因此，每当用户单击“添加”按钮时，就会创建特定分配的会话并在页面上列出。为了简单起见，我忽略了增加数量/减少数量/删除/逻辑。问题是我无法实现在不刷新页面的情况下存储会话的逻辑。

这是我的控制器：

    public function storeAssignmentSession($id, Request $request) {
    $assignmentId = $request->input('assignment_id');
    $quantity = 1; // Default quantity is 1
    $assignment = Assignment::find($assignmentId);

    if ($assignment) {
        $taskSession = session('session_' . $id, []);

        $existingKey = null;
        foreach ($taskSession as $key => $sessionData) {
            if ($sessionData['assignment_id'] === $assignment->id) {
                $existingKey = $key;
                break;
            }
        }

        if ($existingKey !== null) {
            $taskSession[$existingKey]['quantity'] += $quantity;
        } else {
            $taskSession[] = [
                'assignment_id' => $assignment->id,
                'assignment_name' => $assignment->assignment_name,
                'assignment_status' => $assignment->assignment_status,
                'quantity' => $quantity,
            ];
        }

        session(['session_' . $id => $taskSession]);
    }

    return redirect()->back();
}

这是我的路线：

Route::post('/task/{id}/store-assignment-session', [Taskmanager::class, 'storeAssignmentSession'])->name('store_assignment_session');

这是我的刀片：

<script>
$(document).ready(function() {
    // Handle the "Add" button click
    $(".add-assignment").click(function(e) {
        e.preventDefault(); // Prevent the default form submission
        
        var assignmentId = $(this).data("assignment-id");
        var taskId = {{$task->id}};
        
        $.ajax({
            type: 'POST',
            url: '/task/' + taskId + '/store-assignment-session',
            data: { assignment_id: assignmentId },
            success: function(response) {
                // Load the page to refresh the content
                location.reload();

                // Log the session data in the console
                console.log(response);
            },
            error: function(error) {
                alert('Failed to add assignment to session.');
            }
        });
    });
    
    // Handle the "Subtract" button click
    $(".subtract-assignment").click(function() {
        var key = $(this).data("key");
        var taskId = {{$task->id}};
        
        $.ajax({
            type: 'POST',
            url: '/task/' + taskId + '/subtracting-assignment-session/' + key,
            success: function(response) {
                // Load the page to refresh the content
                location.reload();
            },
            error: function(error) {
                alert('Failed to subtract assignment from session.');
            }
        });
    });
    
    // Handle the "Add" button click
    $(".add-assignment").click(function() {
        var key = $(this).data("key");
        var taskId = {{$task->id}};
        
        $.ajax({
            type: 'POST',
            url: '/task/' + taskId + '/adding-assignment-session/' + key,
            success: function(response) {
                // Load the page to refresh the content
                location.reload();
            },
            error: function(error) {
                alert('Failed to add assignment to session.');
            }
        });
    });
    
    // Handle the "Delete" button click
    $(".delete-assignment").click(function() {
        var key = $(this).data("key");
        var taskId = {{$task->id}};
        
        $.ajax({
            type: 'POST',
            url: '/task/' + taskId + '/delete-assignment-session/' + key,
            success: function(response) {
                // Load the page to refresh the content
                location.reload();
            },
            error: function(error) {
                alert('Failed to delete assignment from session.');
            }
        });
    });
});

我是 AJAX 新手。我需要存储会话并将其列出在屏幕上而不重新加载页面。但是，无论我做什么页面都会更新。请问这种情况我该怎么办？

Answer 1

1. 就像@Linesofcode评论的那样，您必须以数组形式响应，而不是重定向或渲染页面

2. 您使用 Laravel 的身份验证系统吗？

因为每个用户都有一个会话密钥，所以您无法通过正常请求访问会话用户。

您必须在ajax请求中添加

csrf token

。让 Laravel 可以知道谁在登录

<meta name="csrf-token" content="{{ csrf_token() }}" />
  
In script

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>

请重新配置ajax header