Создать HTML-таблицу из массива из ответа AJAX

Question

В моем приложении Laravel я добавляю ajax-запрос (который работает после нажатия кнопки). Я получаю результат в ajax, я вижу его на консоли (это массив). Но мне нужно отправить ответ от js в PHP для создания таблицы

Это код ввода:

<input type="text" name="check" id="check">

Это код кнопки:

<button type="button" class="check-client btn btn-success">Find</button>

Это код ajax (JS):

$(document).on("click", ".check-client", function () {
    const data = $("#check").val();

    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        data: {
            'data': data
        },
        url: '/checkValues',
        success: function (result) {
            console.log(result);
            const dataForTable = result;
        }
    });
});

Для создания таблицы я пытаюсь сделать это:

отправить ответ php + html:

$(".testClass").append(result);

получите это значение:

<div class="testClass"></div>

и создайте таблицу, используя foreach:

<div class="testClass"></div>
<table class="table table-bordered text-center">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Person</th>
            <th scope="col">Cost</th>
        </tr>
    </thead>
    <tbody>
      @foreach($dataForTable as $item)
        <tr>
          <th scope="row">$item['id']</th>
          <td>$item['person']</td>
          <td>$item['cost']</td>
        </tr>
      @endforeach
    </tbody>
</table>

Итак, это не работает. Как создать таблицу из ответа ajax?

Answer 1

Проблема в том, что вы пытаетесь запустить jQuery на стороне клиента, чтобы использовать возврат ajax-запроса ( dataForTable ) на стороне сервера, он находится вне сервера контекста PHP. PHP работает только на стороне сервера, в то время как jQuery работает на клиенте браузера, если вы хотите запустить javascript на стороне сервера, вам нужно искать другую технологию, например Node, посмотрите node.js .

Если вы хотите обновить таблицу на стороне клиента с помощью ajax-запроса, вам нужно обновить таблицу итерации переменной ( dataForTable ) на стороне клиента после запроса, например:

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

$( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

Есть много других примеров, подобных приведенному выше, в jQuery .

Наконец, вам нужно работать на стороне клиента, если вы хотите использовать jQuery, или работать на стороне сервера, используяПомощники PHP.