AntonBrock
@AntonBrock
screen light

Что значит html полностью готовить на стороне клиента на JS?

У меня сейчас html подключается в php, т.е. мне нужно к обычному html подключить php и js?
Как тогда можно это сделать " на стороне клиента" этот код?
Спасибо за помощь!

<?php
$db_host = "localhost";
$db_name = "test_codez";
$db_user = "root";
$db_pass = "";
$db = mysqli_connect ($db_host, $db_user, $db_pass, $db_name) or die ("Невозможно подключиться к БД");
?>

  <!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8">
  <title>Test Anton Dobrynin Kazan</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />

</head>
<body>

<table class="sort" style="width:100%">
  <thead>
    <tr>
    <th>Alphabetic</th>
    <th>Numeric</th>
    <th>Date</th>
    <th>Unsortable</th>
    </tr>
  </thead>
  
  <tbody>
    <?php
  $sql = "SELECT * FROM test_table2 ";
  $sql = mysqli_query($db, $sql);
  while ($result = mysqli_fetch_array($sql))
  {
  echo "<tr><td>".$result['Alphabetic']."</td><td>".$result['Numeriс']."</td><td>".$result['Date']."</td><td>".$result['Unsortable']."</td></tr>\n";
  }
    ?>
  </tbody>
  </table>

  <script>
   window.addEventListener("DOMContentLoaded", function() {
    (function(f) {
        function g(c) {
            return function(b, a) {
                b = b.cells[c].textContent;
                a = a.cells[c].textContent;
                b = +b || b;
                a = +a || a;
                return b > a ? 1 : b < a ? -1 : 0
            }
        }
        
        var d = document.querySelector(f),
            e = [].slice.call(d.rows, 1);
        [].slice.call(d.rows[0].cells).forEach(function(c, b) {
            var a = 0;
            c.addEventListener("click", function() {
                e.sort(g(b));
                a && e.reverse();
                e.forEach(function(a) {
                    d.appendChild(a)
                });
                a ^= 1
            })
        })
    })(".sort")
});
  </script>
</body>
</html>
  • Вопрос задан
  • 1724 просмотра
Решения вопроса 1
dimovich85
@dimovich85 Куратор тега JavaScript
https://u-academy.net/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
amark
@amark
rush less, feel more
html полностью готовить на стороне клиента на JS
— в вашем будет значить примерно следующее:

<tbody>
    <?php
  $sql = "SELECT * FROM test_table2 ";
  $sql = mysqli_query($db, $sql);
  while ($result = mysqli_fetch_array($sql))
  {
  echo "<tr><td>".$result['Alphabetic']."</td><td>".$result['Numeriс']."</td><td>".$result['Date']."</td><td>".$result['Unsortable']."</td></tr>\n"; 
  }
    ?>
  </tbody>

этот блок будет заменен на примерно такое (в псевдокоде):

<?php
  $sql = "SELECT * FROM test_table2 ";
  $sql = mysqli_query($db, $sql);
  $return = [];
  while ($result = mysqli_fetch_array($sql))
  {
     $return[] = $result; // Здесь просто собираем данные в одну переменную
  }
 ?>

 <script>
<? echo "var resultArr='".json_encode($return)."'"; ?> // сюда мы передали переменную в JS
// тут должен быть какой-то JS-шаблонизатор, который разберет массив и сформирует таблицу по шаблону
</script>
<tbody>
</tbody>


Вот пример шаблонизатора loDash, который используется в составе удобной библиотечки underscore

P.s. этот пример не для продакшена, но для понимания механизма
Ответ написан
Комментировать
seganim
@seganim
PHP-программист, программный инженер
PHP на стороне клиента не подключается никак, это серверная часть. JS исполняется непосредственно в браузере. Ваш код соответствует требованиям: фрагменты PHP исполняются на сервере и передаются в HTML представление через echo(вывод), а JS в данном случае исполняться будет в браузере.
Ответ написан
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
Это называется рендеринг на клиенте - www.pvsm.ru/javascript/276021


Вот основные этапы этого процесса:

Обработка HTML для создания дерева DOM.
Создание дерева рендеринга.
Расчёт параметров расположения элементов дерева рендеринга на экране, формирование макета страницы.
Визуализация (отрисовка) дерева рендеринга.
www.pvsm.ru/javascript/276021
Ответ написан
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
имеется html, там js который шлет запрос на сервер ajax-ом, получает в ответ json и строит таблицу на его базе.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы