How to get array data returned by PHP in JavaScript

In front-end development, we usually need to obtain data from the back-end and process it. We often choose to use PHP as the back-end language, because PHP can easily generate array data, and these array data usually need to be displayed in the front-end page through JavaScript. use. Next, we will introduce in detail how to obtain the array data returned by PHP in JavaScript.

1. Convert the array to JSON format through PHP

In PHP, we can use the json_encode() function to convert the array into JSON format data, for example:

<?php
   $arr = array(&#39;name&#39;=>'张三','age'=>18);
   echo json_encode($arr);
?>

The above code converts the array $arr into JSON format data and outputs it. The output result is as follows:

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

2. Use Ajax asynchronous request in JavaScript to obtain the JSON format data returned by PHP

In JavaScript, you can use Ajax asynchronous requests to obtain the JSON format data returned by PHP, for example:

var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText); //将JSON格式数据转换为JavaScript对象且存储在变量data中
        console.log(data.name); //打印出name属性值"张三"
        console.log(data.age); //打印出age属性值18
    }
}
xhr.open('GET', 'test.php', true); //设置请求方式、请求地址、异步标识
xhr.send(); //发送请求

The above code creates an XMLHttpRequest object and sets the request method, request address and asynchrony of the object. identification, and send the request through the send() method. When the status of the request is "Completed" and the request status code is 200, the response has been returned successfully and the response content is stored in the xhr.responseText attribute. Next, convert the JSON format data into a JavaScript object and store it in the variable data, so that we can obtain the array data returned by PHP by accessing the properties of the data object.

3. Use jQuery’s $.ajax() method in JavaScript to obtain the JSON format data returned by PHP

jQuery’s $.ajax() method encapsulates Ajax Request implementation can help us complete asynchronous requests more conveniently, for example:

$.ajax({
    type: "GET",
    url: "test.php",
    success: function(data) {
        console.log(data.name); //打印出name属性值"张三"
        console.log(data.age); //打印出age属性值18
    },
    dataType: "json"
});

The above code uses the $.ajax() method to send a GET request, and sets the request address and response data type to JSON format. When the response returns successfully, the success function of this method converts the JSON format data into JavaScript object data and prints out the attribute values.

To sum up, through the above three methods, we can easily obtain the array data returned by PHP in JavaScript. Whether using native Ajax or jQuery's $.ajax() method, we can obtain the JSON format data returned by PHP by correctly setting the request method, request address, asynchronous identifier and data type, and finally convert it into JavaScript objects are processed.

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