Laravel AJAX控制器和数据返回

Question

I am making an AJAX call from a view:

function compareProducts() {
    var productIds = [];
    $('#compare-widget tbody tr').each(function(i, ele) {
        productIds[i] = $(ele).data('product-id');
    });
    $.ajax({
        url: 'product/compare',
        type: 'POST',
        data: {
            "_token": "{{ csrf_token() }}",
            productIds: productIds
        },
        success: function(result) {
        }
    });
}

which is triggering the controller:

public function compare(Request $request)
{
    $products = Product::whereIn('id', $request->productIds)->get();
    return view('compare', compact('products'));
}

but it is not doing anything in browser directly. When I open chrome inspector I see a OK 200 code, and when I open triggered link there, it shows fine, but I am not able to trigger redirection with AJAX.

If I do a window.location.href = "compare"; I get redirected to right page, but I no longer have access to $products

Answer 1

You could save the products to the session and redirect to the compare page, that way you would have access to the products when you redirect to the compare page

public function compare(Request $request)
{
    $products = Product::whereIn('id', $request->productIds)->get();

    session(['products' => $products]);

    return url('compare');
}

and in your success callback you could redirect to the compare page

success: function (result) {
    window.location.href = result;
}

and in your compare view access the products from the session

{{ session('products') }}

Answer 2

Ajax data is lost after page refresh. You should use a submit method.

I suggest you change your implementation to be something like this

<form id="the-form" method="post" action="/products/compare">
    {{ csrf_field() }}
</form>

<button id="compare-link">Compare</button>

<script>
   $('#compare-link').click(
        function(){
            $('.hidden-compare').remove();
            let productIds = [5,2,3,4]; // implement your algorithm
            productIds.forEach(function(c) {
                $('#the-form').append('<input type="hidden"name="compares[]" class="hidden-compare" value="'+c+'">');
            });
            $('#the-form').submit()
          }
    );
</script>