如何将信息从PHP传递到JQUERY？

Question

I'm having a hard time figuring out what is the best way to transfer information from PHP to Jquery. I know putting PHP in Javascript is a really bad alternative (my JS and PHP files are seperated anyway), so what I usually do is print the info with PHP in the HTML with a input type hidden and retrieve the info in JQuery using the element.text() or .val() or any other method, but I feel this is kind of noobish. Is there a better way?

Answer 1

I recommend never using a server-side language to build JavaScript. Instead, keep your data in HTML (model), your styles in CSS (view), and your interactions in JS (controller).

When you need to pass data to JavaScript, make good use of attributes and templates.

When it comes to passing data via attributes, you can go a long way with just using native attributes.

In this example, it is quite apparent that the link will open a modal, and the [href] attribute is used to point to where the modal lives:

<a href="#modal" class="modal-link">Open modal</a>
<div id="modal">lorem ipsum</div>

When you can't fit data within native attributes, you should make use of [data-*] attributes.

In this example, [data-tooltip] is being used to store a rich-text tooltip.

<div data-tooltip="&lt;p&gt;lorem ipsum&lt;/p&gt;">...</div>

Even more importantly, jQuery automatically grabs and casts all [data-*] attributes on a DOM node when .data() is called on the node.

<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>

The thing to watch out for is JSON encoding within HTML encoding. jQuery makes it very straight-forward to get the data out of the DOM node without needing to worry about decoding, but in PHP you need to make sure that you json_encode data before calling htmlentities:

<div data-example="<?= htmlentities(json_encode($someArray)) ?>">...</div>

In some instances you may want to make use of jQuery's .attr() method.

---

For large amounts of data, such as an HTML template string, you can use <script> tags with a template mime type (such as type="text/x-jquery-tmpl"):

<script id="template-example" type="text/x-jquery-tmpl">
    <h1>${title}</h1>
    <p>${body}</p>
</script>

Or you can use the HTML5 <template> element:

<template id="template-example">
    <h1>${title}</h1>
    <p>${body}</p>
</template>

You can then access the HTML contents of the element run it through whatever your favorite flavor of string templating happens to be.