Как применить данные, полученные в виде AJAX с моей этикетки, к моему шаблону блейда?

Question

Я использовал Ajax для получения данных JSON от контроллера.Однако я не знаю, как переслать полученные данные в оператор foreach шаблона блейда в теге таблицы.

Ajax

 $.ajax({
        url: '{{route('translation.recodes')}}',
        type: 'post',
        data: {_token: "{{ csrf_token() }}"},
        success: function (data) {
            console.log(data); // get controller data -> $translationRecords

        }, error: function () {
            alert("error!!!!");
        }
    });

HTML

<table class="table table-hover">
    @if($translationRecords)
       @foreach($translationRecords as $translationRecord)                            
           <tr>
              <td id="recodeValue{{ $translationRecord->id }}" style="display:none">{{ $translationRecord->id }}</td>
              <td>{{ $translationRecord->korean }}</td>    
              <td>{{ $translationRecord->japanese }}</td>
              <td><button id="recodeRemoveBtn{{ $translationRecord->id }}" type="button" class="btn btn-danger float-right">삭제</button></td>                      
          </tr>
       @endforeach
    @endif
</table>

Я предполагаю, что я подумываю использовать jQuery для динамического создания тегов в таблице, но я также не знаю, как вернуть данные из контроллера.

Answer 1

вот вам ответ ссылка
Вы не можете.

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

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

Answer 2

Просто задайте идентификатор для тела таблицы и используйте литералы шаблона

<table class="table table-hover">
  <thead>
  </thead>
  <tbody id="transRecords">

  </tbody>
</table>

и затем в вашей функции ajax используйте литералы шаблонов ``

 $.ajax({
    url: '{{route('translation.recodes')}}',
    type: 'post',
    data: {_token: "{{ csrf_token() }}"},
    success: function (data) {
        data.forEach((rec)=>{
        document.querySelector('#transRecords').innerHTML +=
        `
         <tr>
             <td id="recodeValue-${rec.id}" style="display:none">${rec.id}</td>
             <td>${rec.korean}</td>
             <td>${rec.japanese}</td>
             <td><button id="recodeRemoveBtn-${rec.id}" type="button" class="btn btn-danger float-right">삭제</button></td>
        </tr>

        `
     })

    }, error: function () {
        alert("error!!!!");
    }
});

Answer 3

Вы можете достичь чего-то такого.
data [i] зависит от того, как вы отправляете свои данные с контроллера.

$.ajax({
        url: '{{route('translation.recodes')}}',
        type: 'post',
        data: {_token: "{{ csrf_token() }}"},
        success: function (data) {
            console.log(data); // get controller data -> $translationRecords
            $('#datatable tr').not(':first').not(':last').remove();
            var html = '';
            for(var i = 0; i < data.length; i++){
                html += '<tr>'+
                            '<td '+id="recodeValue'+data[i].id+'" style="display:none"+'>' + data[i].id + '</td>' +
                            '<td>' + data[i].korean + '</td>' +
                            '<td>' + data[i].japanese + '</td>' +
                            '<td>' + data[i].var4 + '</td>' +
                        '</tr>';
                }   
            $('#datatable tr').first().after(html);

        }, error: function () {
            alert("error!!!!");
        }
    });

<table id="datatable">
</table>