如果在使用 ajax 时条件无效，如何重定向到另一个页面？

Question

我想通过 ajax 将产品添加到购物车。只有登录用户才能向用户添加产品。如果用户未登录，则将他重定向到登录页面

Here are my ajax request in blade template

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function addedToCart(){
        var product = $("#productId").val();;
        var val = $("#countItem").val();
        var unit = parseInt(val);
        $.ajax({
            type: "POST",
            url: "/addtocart",
            data: {product: product, unit: unit},
            dataType: "json",
            success: function (res){
                alertMsg.fire({
                    title: 'Product added to Cart'
           })
            }
        });
    }
     `

Here the controller code

function addToCart(Request $req){
    if($req->session()->has('user')){
        $cart = new Cart;
        $cart->user_id = $req->session()->get('user')['id'];
        $cart->product_id = $req->product;
        $cart->unit = $req->unit;
        $cart->save();
        return response($cart, 201);
    }
    
    else{
        return redirect('/login');
    }
    
}

不能走，登录路径还停留在同一个页面

Answer 1

在 JSON 响应中您不能在服务器端使用重定向。

您可以在这里玩弄状态，例如用户已登录，然后执行您的操作，否则 return 响应 status: false。

我已经在下方修改了您的代码 link，并在评论中添加了我所做的更改。

你的JS代码

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

function addedToCart(){
    var product = $("#productId").val();;
    var val = $("#countItem").val();
    var unit = parseInt(val);
    $.ajax({
        type: "POST",
        url: "/addtocart",
        data: {product: product, unit: unit},
        dataType: "json",
        success: function (response){
            if (response.status) { // if it is true
                alertMsg.fire({
                    title: 'Product added to Cart',
                });
            } else {
                // if it is false, redirect
                window.location.href = response.redirect_uri;
            }
        },
    });
}

您的控制器功能：

function addToCart(Request $request){
    if($req->session()->has('user')){
        $cart = new Cart;
        $cart->user_id = $request->session()->get('user')['id'];
        $cart->product_id = $request->product;
        $cart->unit = $request->unit;
        $cart->save();
        return response($cart, 201);
    }
    else{
        // you can return with status flag, and using the redirect_uri your can redirect at your desire page.
        return response()->json(array(
            'status' => false,
            'redirect_uri' => route('login'),
        ), 401);
    }
    
}

不确定，关于在 AJAX success() 中你会得到的 false 状态，如果你不会得到那么你必须在 [= 之后添加 error 函数14=]。因为我们在响应中传递 header 状态。

error: function (error) {
    // do console log to check what you get
}

Answer 2

Ajax 请求需要 JSON 数组文字，例如 JSON 格式的 array/objects 和纯字符串作为响应。意思是，您不能在 PHP.

中创建重定向对象 return

你可以

// in controller
if (!$req->session()->has('user')) {
    return response()->json([
        'error' => "Forbidden"
    ], 403);
}

// save the cart and return success object

然后

// in JS
$.ajax({
    type: "POST",
    url: "/addtocart",
    data: {product: product, unit: unit},
    dataType: "json",
    success: function (res){
        alertMsg.fire({
            title: 'Product added to Cart'
        })
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
        window.location = 'path_for_guests'// this path should be returned from backend for greater security 
    } 
});

另外，请注意未保存的对象。例如，如果 $cart 未成功保存，则不应显示 return 成功消息。你的代码现在正在做什么。关注 Object Calisthenics appropriate code (one else it too much), you can use switch and in suitable cases match 各种例外情况和期望，例如

用户会话不存在 403
未创建对象 500
购物车已创建 201
等等

如果在使用 ajax 时条件无效，如何重定向到另一个页面？

how to redirect to another page if condition is not valid while using ajax?

ajax

laravel