Как отправить возвращенные данные в ajax на php в том же файле?

Question

После вызова AJAX я получил данные в формате AJAX с форматом JSON. Теперь я хочу отправить эти данные в цикл foreach в том же блейд-файле laravel.

* здесь ajax с данными, возвращаемыми с контроллера laravel в формате json *

    <script>
        $(document).ready(function(){
            $('.category').click(function(){
                var id= "";
                id= $(this).val();
                    console.log(id);
                    $.ajax({
                        url:"browse-events",
                        method: "GET",
                        data:{id:id},
                        success:function(reponseData){
                            console.log(responseData);
                        },
                        error:function(){
                            console.log('Error in receiving data');
                        }
                    });  
            });
        });
    </script>

* Это цикл foreach в php, где возвращаемые данные ajax должны быть зациклены *

            @foreach ($responseData as $data)
                <div class="col-md-4 col-sm-6">
                        <h6>{{$data->name}}</h6>
                        <p >{{$data->data_id}} </p>
                </div>
            @endforeach

здесь reponseData в вызове ajax вернул данные в формате Json. Теперь мне нужно отправить данные в цикл foreach php в том же файле blade.php laravel. Как я могу это сделать?

Answer 1

Вы не можете.

Что вы можете сделать:

1. Либо используйте React, Vue.js или Angular
2. Создайте элементы HTML после полученияответьте и вставьте их с помощью JS
3. Верните уже обработанный контент (не рекомендуется) и просто вставьте его в представление
4. Просто перезагрузите страницу с параметром запроса id и отобразите страницу соответствующим образом

Answer 2

Невозможно отправить данные ajax / json в цикл блейд-foreach.Blade обрабатывает массивы на основе php при отображении страницы, а ajax загружает данные, когда страница уже загружена.

The solution here would be to place the data with a javascript for loop:

$(document).ready(function(){
            $('.category').click(function(){
                var id= "";
                id= $(this).val();
                    console.log(id);
                    $.ajax({
                        url:"browse-events",
                        method: "GET",
                        data:{id:id},
                        success:function(reponseData){
                            let parentObject = $('#parentObject'); //The object where all divs are in
                            responseData.forEach((data) => {
                                parentObject.append('
                                    <div class="col-md-4 col-sm-6">
                                        <h6>'+ data.name +'</h6>
                                        <p>'+ data.data_id +' </p>
                                    </div>
                                ');
                            })
                        },
                        error:function(){
                            console.log('Error in receiving data');
                        }
                    });  
            });
        });