How jquery's ajax passes an array to the background

jQuery is a popular front-end JavaScript framework that provides a rich set of features and components, one of which is Ajax. In Ajax, we often need to pass data to the background, whether it is a single value or multiple values. This article will introduce how to use jQuery's Ajax to pass an array to the background.

1. Serializing array

Before passing the array, it needs to be serialized into a transportable format. You can use jQuery's $.param() method to serialize an array into a string in the format "name=value". For example:

var arr = [1, 2, 3];
var param = $.param({ data: arr }); // "data%5B%5D=1&data%5B%5D=2&data%5B%5D=3"

In the above example, we first defined an array arr, which contains three values. We then call the $.param() method to serialize the array into a string containing a parameter named "data". The value of this parameter is the serialized result of an array. Finally, the param variable we get contains a serialized string.

2. Pass the serialized string

Now that we have serialized the array into a string, we can use Ajax to pass this string to the background. You can use jQuery's $.ajax() method to send a POST request and use the serialized string as a request parameter. For example:

var arr = [1, 2, 3];
var param = $.param({ data: arr });
$.ajax({
    url: "example.php",
    type: "POST",
    data: param,
    success: function(result) {
        console.log(result);
    }
});

In the above example, we called the $.ajax() method, passing some option parameters. Among them, url represents the requested URL, type represents the request type as POST, data represents the request parameters, and success represents the callback function executed after the request is successful. In this example, we pass the serialized string to Ajax as a request parameter.

3. Receive the array returned from the background

In the background, we need to parse the received request parameters and extract the serialized array data. This task can be accomplished using the parse_str() function in PHP. For example:

$data = array();
parse_str($_POST['data'], $data);

In the above example, we first define an empty array $data, and then use the parse_str() function to extract the parameter named "data" from the $_POST array. The parse_str() function will parse this serialized string into a PHP array and store it in the $data variable. Now, we can use this array under the hood to perform various operations.

4. Full Example

Now, let’s see a complete example that demonstrates how to pass an array to the background and receive its response using jQuery’s Ajax:

var arr = [1, 2, 3];
var param = $.param({ data: arr });
$.ajax({
    url: "example.php",
    type: "POST",
    data: param,
    success: function(result) {
        console.log(result); // ["1", "2", "3"]
    }
});

$data = array();
parse_str($_POST['data'], $data);
$response = json_encode($data['data']);
echo $response;

In this example, we first define an array arr, which contains three values. Then we use the $.param() method to serialize it into a string param. Next, we use the $.ajax() method to send a POST request to "example.php", and the request parameter is the param string.

Under the hood, we parsed the request parameters using the parse_str() function and converted them into a PHP array $data. We then use the json_encode() function to convert this array into a JSON-formatted string and return it as the response.

On the front end, we use jQuery's success callback function to receive the response. In this example, the response is an array containing three strings. We output it to the console to check.

With this complete example, you should have understood how to use jQuery's Ajax to pass an array to the background and receive its response. This example can help you apply these techniques in real development.

The above is the detailed content of How jquery's ajax passes an array to the background. For more information, please follow other related articles on the PHP Chinese website!