How to pass php array to js

As the trend of separation between the front end and the back end continues to strengthen, there are more and more cases where the front end needs to interact with the back end. In this case, the front end needs to be able to get the data processed by the back end, which usually returns the data in the form of an array. Therefore, how to pass PHP arrays to JS has become a very important issue.

This article will introduce several common methods of transmitting PHP arrays, so that readers can more conveniently obtain and process the data returned by the backend when interacting with front-end and back-end data. The specific methods are as follows:

Method 1: Use JSON

Currently, the most common solution for front-end and back-end data interaction is to use JSON. JSON (JavaScript Object Notation) is a lightweight data exchange format that is easy to read and write, and easy to be parsed and generated by machines, making it very suitable for data exchange. PHP has a built-in function json_encode() that can convert a PHP array into JSON format, then transfer it to the front end using AJAX technology, and then use JSON.parse() to convert it into an object that JavaScript can directly manipulate.

Use PHP code to convert the array into JSON:

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

Use AJAX on the front end to obtain JSON data:

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

In the above code, we use the XMLHttpRequest object to request data from the server , and use the JSON.parse() method to convert the obtained JSON format string into a JavaScript object.

Method 2: Use serialize() and unserialize()

If we do not need to consider the data structure when transmitting data, then the serialize() and unserialize() functions will be one Not a bad choice.

The serialize() function serializes the variable into a string, and the unserialize() function can restore the string to its original data type. In PHP, we can use serialize() to serialize an array into a string, then use AJAX to get the data and then deserialize it.

Use PHP code to serialize the array:

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$serializedData = serialize($myArray);

Use AJAX on the front end to obtain the serialized string:

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = request.responseText;
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

Next, we can use the unserialize() method to It is deserialized into a PHP object:

$unserializedData = unserialize($serializedData);
print_r($unserializedData);

Method 3: Using HTML5 data-* attributes

If we only need to transmit some simple data and do not need to use AJAX requests, then we can PHP arrays are passed to the front end via the HTML5 data- attribute. The data- attribute is a custom attribute that can be used to store custom data of page elements to implement data binding on the front end. We can first define a data-* attribute on an HTML element, then convert the data into a JSON format string in PHP, and finally use PHP to output it to the page.

Use PHP code to convert the array into JSON and output it to the data-* attribute:

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

echo '
This is my div
';

Next, we can get this element through JavaScript and parse the data-json attribute into a JavaScript object ：

var myDiv = document.getElementById("myDiv");
var jsonData = JSON.parse(myDiv.dataset.json);
console.log(jsonData);

Method 4: Using AjaxTransport

Sometimes, when we interact with front-end and back-end data, we need to customize some parameters to facilitate back-end processing. In this case, you can use AjaxTransport in jQuery. AjaxTransport allows us to perform some custom operations before sending the AJAX request, such as adding a custom parameter in the request header to facilitate the backend processing of PHP arrays.

Use PHP code to convert the array into JSON:

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

When the user sends an AJAX request, we can add this JSON data to the request header:

$.ajaxTransport("+json", function(options, originalOptions, xhr) {
  xhr.setRequestHeader("X-JSON", json);
});

In the backend In PHP, we can get the PHP array based on the custom parameters added in the request header:

$myArray = json_decode($this->request->header('X-JSON'));

To sum up, we can use a variety of methods to transfer the PHP array to JavaScript, which should be based on the specific situation. Choose the most suitable option. All in all, mastering these methods can allow developers to interact with front-end and back-end data more flexibly and improve development efficiency.

The above is the detailed content of How to pass php array to js. For more information, please follow other related articles on the PHP Chinese website!