Способы передачи информации из PHP в JQUERY?

0

Мне сложно понять, что является лучшим способом передачи информации с PHP на JQuery. Я знаю, что положить PHP в Javascript - очень плохая альтернатива (мои файлы JS и PHP все равно разделены), поэтому я обычно делаю это, чтобы напечатать информацию с PHP в HTML с скрытым типом ввода и получить информацию в JQuery с помощью элемента.text() или.val() или любой другой метод, но я чувствую, что это своего рода noobish. Есть ли способ лучше?

Теги:

2 ответа

1
Лучший ответ

Я рекомендую никогда не использовать серверный язык для создания 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="&lt;p&gt;lorem ipsum&lt;/p&gt;">...</div>

Еще важнее то, что jQuery автоматически захватывает и отбрасывает все [data-*] атрибуты на узле DOM, когда на узел вызывается .data().

<div id="example"
    data-foo="bar"
    data-fizz="true"
    data-max="100"
    data-options="{&quot;lorem&quot;:&quot;ipsum&quot;}">
    ...
</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-элемента элемента, используя его, каким бы ни был ваш любимый аромат шаблонов строк.

1

Вы можете просто переписать 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, но если это статические переменные, которые не нужно изменять в течение жизни страницы, я бы пошел с вышеописанным методом.

  • 0
    Разве это не плохой способ внедрить php в некоторый javascript? Кроме того, мой внешний js связан в моей голове, так что я должен был бы сделать это непосредственно перед тэгом script src?
  • 2
    Правильно, это должно быть где-то перед тегом скрипта, который вы используете для включения файла js. Я регулярно использую этот метод в своих проектах. Я гарантирую, что все данные, переданные таким образом, проверяются и экранируются, где это необходимо, в противном случае их можно использовать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню