ajax implements two php passing arrays

In recent years, with the increasingly rapid development of Internet technology, more and more websites have begun to use Ajax to improve user experience. This article will introduce how to implement array transfer between two php files through Ajax.

1. What is Ajax

Ajax (Asynchronous JavaScript and XML), that is, asynchronous JavaScript and XML, is a technology used to create fast dynamic web pages. Ajax allows web pages to be updated asynchronously by exchanging a small amount of data with the server in the background. This means that parts of a page can be updated without reloading the entire page. This can improve the response speed of the page and increase the user experience.

2. What is an array

An array is an ordered set of variables, which can be any data type, including strings, numbers, objects, etc. An array can store multiple values, and each value can be accessed through a unique index.

3. Use Ajax to transmit arrays

Step 1: Create two php files, one for sending arrays (send.php) and one for receiving arrays (receive.php).

send.php file code:

<?php
$array = array("name" => "Tom", "age" => "25", "gender" => "male");
echo json_encode($array);
?>

receive.php file code:

<?php
$data = $_POST['data'];
$array = json_decode($data, true);
echo "姓名：" . $array['name'] . "<br>";
echo "年龄：" . $array['age'] . "<br>";
echo "性别：" . $array['gender'] . "<br>";
?>

Step 2: Create an Ajax request using the XMLHttpRequest object.

var xhr = new XMLHttpRequest();

Step 3: Use the open() method to open a request.

xhr.open("POST", "receive.php", true);

Step 4: Set HTTP request headers.

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Step five: Set up the onreadystatechange event handler to perform the appropriate operations when the server responds.

xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
   }
};

Step 6: Encode the data to be sent into URL format.

var data = "data=" + encodeURIComponent(JSON.stringify(array));

Step 7: Send request.

xhr.send(data);

4. Practical Application

The following is a specific example that demonstrates how to use Ajax to transmit an array between two PHP files. Suppose we have a form where the user enters name, age, gender and other information, and then submits the form. This information is sent to the send.php file through Ajax, and returned to the receive.php file, and finally displayed.

The code is as follows:

<script>
   function sendArray() {
      var array = {};
      array['name'] = document.getElementById('name').value;
      array['age'] = document.getElementById('age').value;
      array['gender'] = document.getElementById('gender').value;

      var xhr = new XMLHttpRequest();
      xhr.open(&quot;POST&quot;, &quot;receive.php&quot;, true);
      xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);
      xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
         }
      };
      var data = &quot;data=&quot; + encodeURIComponent(JSON.stringify(array));
      xhr.send(data);
   }
</script>


   

      姓名：

      年龄：

      性别：
         男
         女
      

      
   
   

receive.php file code:

<?php
$data = $_POST['data'];
$array = json_decode($data, true);
echo "姓名：" . $array['name'] . "<br>";
echo "年龄：" . $array['age'] . "<br>";
echo "性别：" . $array['gender'] . "<br>";
?>

5. Summary

This article introduces how to use Ajax to transmit arrays through an actual The example demonstrates the specific implementation process. Ajax can not only improve the response speed of web pages, but also optimize user experience. By studying this article, I believe that everyone will have a deeper understanding and application knowledge of Ajax and array transmission.

The above is the detailed content of ajax implements two php passing arrays. For more information, please follow other related articles on the PHP Chinese website!