P粉4638111002023-08-28 10:40:20
I usually use data-* attributes in HTML.
<div class="service-container" data-service="<?= htmlspecialchars($myService->getValue()) ?>" > </div> <script> $(document).ready(function() { $('.service-container').each(function() { var container = $(this); var service = container.data('service'); // Var "service" now contains the value of $myService->getValue(); }); }); </script>
This example uses jQuery, but it can be adapted to other libraries or plain JavaScript.
You can read more about dataset properties here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
P粉5026087992023-08-28 00:24:11
There are actually several ways to do this. Some require more overhead than others, and some are considered better than others.
names not listed in order:
In this article, we will look at each of the above methods, understand the advantages and disadvantages of each method, and how to implement them.
This method is considered the best because your server-side and client-side scripts are completely separate .
With AJAX, you need two pages, one where PHP generates the output, and a second where JavaScript gets that output:
/* Do some operation here, like talk to the database, the file-session * The world beyond, limbo, the city of shimmers, and Canada. * * AJAX generally uses strings, but you can output JSON, HTML and XML as well. * It all depends on the Content-type header that you send with your AJAX * request. */ echo json_encode(42); // In the end, you need to `echo` the result. // All data should be `json_encode`-d. // You can `json_encode` any value in PHP, arrays, strings, // even objects.
<!-- snip --> <script> fetch("get-data.php") .then((response) => { if(!response.ok){ // Before parsing (i.e. decoding) the JSON data, // check for any errors. // In case of an error, throw. throw new Error("Something went wrong!"); } return response.json(); // Parse the JSON data. }) .then((data) => { // This is where you handle what to do with the response. alert(data); // Will alert: 42 }) .catch((error) => { // This is where you handle errors. }); </script> <!-- snip -->
The combination of the above two files will sound an alert 42
when the file loading is complete.
This method is not as good as AJAX, but it still has its advantages. There is still a relative separation between PHP and JavaScript, in the sense that there is no direct PHP in JavaScript.
to store the information, since it's easier to get the information beyond inputNode.value
, but doing so means there are meaningless elements in the HTML. HTML has the
element for representing data about a document, and HTML 5 introduced the data-*
attribute for use specifically with JavaScript that can be associated with a specific element read data. With this, the idea is to create some kind of element that is not displayed to the user but is visible to JavaScript.
<!-- snip --> <div id="dom-target" style="display: none;"> <?php $output = "42"; // Again, do some operation, get the output. echo htmlspecialchars($output); /* You have to escape because the result will not be valid HTML otherwise. */ ?> </div> <script> var div = document.getElementById("dom-target"); var myData = div.textContent; </script> <!-- snip -->
This is probably the easiest to understand.
The implementation is relatively simple:
<!-- snip --> <script> var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon! </script> <!-- snip -->
Good luck!