How to get PHP array in JavaScript

Today, when the front and back ends are separated, JavaScript and PHP are often used to build web applications. Among them, JavaScript handles the interactive logic on the browser side, while PHP, as the server-side language, is responsible for data processing. During the data transfer process, it is often necessary to pass PHP arrays to JavaScript.

So, how to get a PHP array in JavaScript? Below, let us introduce several methods in detail.

1. JSON formatting

The most common method is to convert the PHP array into JSON format and parse it in JavaScript. PHP provides the json_encode() function to convert PHP arrays into JSON format. This function accepts the PHP array that needs to be converted as a parameter and returns a string in JSON format.

For example, the PHP array is as follows:

$phpArray = array(
    "name" => "张三",
    "age" => 18,
    "gender" => "男"
);

Convert the array into a string in JSON format:

$jsonStr = json_encode($phpArray);

At this time, the obtained $jsonStr The string is as follows:

{
  "name": "张三",
  "age": 18,
  "gender": "男"
}

Next, use the JSON.parse() function in JavaScript to parse to get the JavaScript object:

var jsObject = JSON.parse('<?php  echo $jsonStr ?>');
console.log(jsObject.name); //输出：张三

It should be noted that, If there are Chinese characters in the PHP array, you need to set the JSON_UNESCAPED_UNICODE parameter in the json_encode() function for correct conversion.

2. Use Ajax to obtain data asynchronously

Another method is to use Ajax asynchronous requests to obtain data. jQuery provides the $.ajax() function, which can be used to send asynchronous requests to obtain PHP array data.

First, in PHP, use the json_encode() function to convert the array to be passed into a JSON format string, and use echo to output:

$phpArray = array(
    "name" => "张三",
    "age" => 18,
    "gender" => "男"
);
$jsonStr = json_encode($phpArray);
echo $jsonStr;

Next, send an asynchronous request in JavaScript to obtain the data passed by PHP:

$.ajax({
    type: "GET", //请求方式
    url: "test.php", //请求地址
    dataType: "json", //返回数据格式
    success: function(data) {
        console.log(data.name); //输出：张三
    }
});

Among them, the dataType parameter specifies the format of the response data, successThe parameter is the request success callback function.

It should be noted that when converting a PHP array into a JSON format string, make sure that the string conforms to the JSON format specification, otherwise obtaining data through Ajax may fail.

3. Use the Hidden element method

Another method is to use the hidden element to store PHP array data in the page and get the value of the element in JavaScript.

For example, in PHP there is the following array:

$phpArray = array(
    "name" => "张三",
    "age" => 18,
    "gender" => "男"
);

This array can be converted into a JSON format string and stored in a hidden element:

<input>'>

Next, get the value of this hidden element in JavaScript and convert it into a JavaScript object:

var jsonStr = $("#phpArray").val();
var jsObject = JSON.parse(jsonStr);
console.log(jsObject.name); //输出：张三

It should be noted that when converting the JSON format string, it needs to be enclosed in quotation marks so that it can be used in the hidden element stored correctly. When getting the value of a hidden element in JavaScript, you need to use jQuery's val() method.

Conclusion

In today’s world where front-end and back-end are separated, JavaScript and PHP, as web front-end and back-end languages, often need to transfer data. By using JSON formatting, Ajax to obtain data asynchronously, and using the Hidden element method, you can successfully obtain, display, and operate PHP array data in JavaScript.

In practical applications, it is necessary to choose the appropriate method according to the specific scenario, and ensure that the data is processed and verified in the correct format during the data transfer process to ensure the stability and security of the program.

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