Мне сложно понять, что является лучшим способом передачи информации с PHP на JQuery. Я знаю, что положить PHP в Javascript - очень плохая альтернатива (мои файлы JS и PHP все равно разделены), поэтому я обычно делаю это, чтобы напечатать информацию с PHP в HTML с скрытым типом ввода и получить информацию в JQuery с помощью элемента.text() или.val() или любой другой метод, но я чувствую, что это своего рода noobish. Есть ли способ лучше?
Я рекомендую никогда не использовать серверный язык для создания JavaScript. Вместо этого сохраните свои данные в HTML (модели), ваших стилях в CSS (view) и ваших взаимодействиях в JS (контроллере).
Когда вам нужно передать данные на JavaScript, хорошо используйте атрибуты и шаблоны.
Когда дело доходит до передачи данных через атрибуты, вы можете пройти долгий путь, используя только собственные атрибуты.
В этом примере вполне очевидно, что ссылка откроет модальный, а атрибут [href]
будет использоваться для указания того, где модаль живет:
<a href="#modal" class="modal-link">Open modal</a>
<div id="modal">lorem ipsum</div>
Если вы не можете поместить данные в собственные атрибуты, вы должны использовать атрибуты [data-*]
.
В этом примере используется [data-tooltip]
для хранения всплывающей подсказки с богатым текстом.
<div data-tooltip="<p>lorem ipsum</p>">...</div>
Еще важнее то, что jQuery автоматически захватывает и отбрасывает все [data-*]
атрибуты на узле DOM, когда на узел вызывается .data()
.
<div id="example"
data-foo="bar"
data-fizz="true"
data-max="100"
data-options="{"lorem":"ipsum"}">
...
</div>
<script>
$('#example').data();
/*
{
foo: 'bar',
fizz: true,
max: 100
options: {
lorem: 'ipsum'
}
*/
</script>
Вещь, на которую следует обратить внимание, - кодирование JSON в кодировке HTML. jQuery делает очень прямолинейным получение данных из узла DOM без необходимости беспокоиться об декодировании, но в PHP вам необходимо убедиться, что данные json_encode
перед вызовом htmlentities
:
<div data-example="<?= htmlentities(json_encode($someArray)) ?>">...</div>
В некоторых случаях вам может понадобиться использовать метод jQuery .attr()
.
Для больших объемов данных, таких как строка шаблона HTML, вы можете использовать теги <script>
с типом mime шаблона (например, type="text/x-jquery-tmpl"
):
<script id="template-example" type="text/x-jquery-tmpl">
<h1>${title}</h1>
<p>${body}</p>
</script>
Или вы можете использовать элемент HTML5 <template>
:
<template id="template-example">
<h1>${title}</h1>
<p>${body}</p>
</template>
Затем вы можете получить доступ к содержимому HTML-элемента элемента, используя его, каким бы ни был ваш любимый аромат шаблонов строк.
Вы можете просто переписать PHP-переменные в переменные Javascript для использования jQuery следующим образом:
<?php
$stringVar = "hi";
$numVar = 1.5;
?>
<script>
var stringVar = "<?php echo $stringVar; ?>";
var numVar = <?php echo $numVar; ?>;
</script>
Это можно использовать практически для любого типа данных, если вы его правильно преобразуете при повторении его (часто json_encode()
достаточно для сложных структур, таких как массивы и объекты).
Также обратите внимание, что этот способ будет работать, только если ваш код jQuery включен после определения этих переменных.
Другой способ - изучить AJAX, но если это статические переменные, которые не нужно изменять в течение жизни страницы, я бы пошел с вышеописанным методом.