通过 Ajax 方法渲染 Laravel 组件答案

【问题标题】：Render Laravel Component via Ajax method通过 Ajax 方法渲染 Laravel 组件
【发布时间】：2020-06-29 10:02:25
【问题描述】：

如何渲染通过 ajax 请求从控制器发送的组件？例如我想使用这种方法动态过滤产品：

加载索引网址
根据过滤类别获取产品或使用ajax返回所有产品

我的 ajax 代码：

$(document).ready(function () {
    filterData();

    // Filter data function
    function filterData() {
        // Initializing loader
        $('#product-listing-row').html('<div id="loading" style="" ></div>');
        var action = 'fetchData';
        var subCategory = getFilter('sub-category');

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

        // Ajax Call
        $.ajax({
            url: "/shop/filter",
            method: "POST",
            data: {action: action, subCategory: subCategory},
            success: function (data) {
                $('#product-listing-row').html(data);
            }
        });
    }

    // Get Filter by class name function
    function getFilter(className) {
        var filter = [];
        $('.' + className + ':checked').each(function () {
            filter.push($(this).val());
        });

        //console.log(filter);

        return filter;
    }

    $('.common-selector').click(function () {
        filterData();
    });
});

我正在从 ProductController获取所有过滤器

我想从控制器返回特定组件，而不是在控制器中手动编写 html

产品控制器：

public function productFilter() {
            if (!request()->action) abort('500');
            
            // Starting the query for products which are active
            $products = Product::where('is_active', '1');
            
            //dump(request()->subCategory);
            
            /* Checking the filters */
            // sub category exists
            if (request()->subCategory) $products = $products->where('sub_category_id', request()->subCategory);
            
            // Completing the query
            $products = $products->orderBy('created_at', 'DESC')->paginate(15);
            // Adding reviews and total review
            $products = Product::setProductReviewTotalReviewsAttr($products);
            
            foreach ($products as $product)
                //view('components.shop-product', ['product' => $product])->render();
                echo '<x-shop-product :product="$product"></x-shop-product>';
        }

我收到的是回显的整个字符串，而不是渲染组件。有什么办法可以让组件渲染？

提前致谢

【问题讨论】：

标签： laravel

【解决方案1】：

其实我现在自己找到了办法

我将以下内容应用于 ProductController

return View::make("components.shop-product")
    ->with("product", $product)
    ->render();

更新代码：

        public function productFilter() {
            if (!request()->action) abort('500');
            
            // Starting the query for products which are active
            $products = Product::where('is_active', '1');
            
            //dump(request()->subCategory);
            
            /* Checking the filters */
            // sub category exists
            if (request()->subCategory) $products = $products->where('sub_category_id', request()->subCategory);
            
            // Completing the query
            $products = $products->orderBy('created_at', 'DESC')->paginate(15);
            // Adding reviews and total review
            $products = Product::setProductReviewTotalReviewsAttr($products);
            
            $output = '';
            
            foreach ($products as $product) {
                $output .= View::make("components.shop-product")
                    ->with("product", $product)
                    ->render();
            }

            if (count($products) > 0)
                echo $output;
            else
                echo '<div class="col">No Data</div>';
        }

【讨论】：