ajax實作兩個php傳數組

近年來，隨著網路科技的日益迅速的發展，越來越多的網站開始使用Ajax來提升使用者體驗。本文將介紹如何透過Ajax實現兩個php檔案之間的陣列傳輸。

一、什麼是Ajax

Ajax（Asynchronous JavaScript and XML） 即非同步JavaScript和XML，是 一種用來建立快速動態網頁的技術。透過在後台與伺服器進行少量資料交換，Ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對頁面的某個部分進行更新。這樣可以提高頁面的回應速度，增加使用者體驗。

二、什麼是陣列

陣列是一組有序的變數集合，可以是任意資料類型，包括字串、數字、物件等等。一個陣列可以儲存多個值，並且每個值都可以透過一個唯一的索引來存取。

三、使用Ajax傳輸陣列

步驟一：建立兩個php文件，一個用於發送陣列（send.php），一個用於接收陣列（receive.php）。

send.php檔案程式碼：

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

receive.php檔案程式碼：

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

步驟二：使用XMLHttpRequest物件建立一個Ajax請求。

var xhr = new XMLHttpRequest();

步驟三：使用open()方法開啟一個請求。

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

步驟四：設定HTTP請求頭。

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

步驟五：設定onreadystatechange事件處理程序，以便在伺服器回應時執行對應的操作。

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

步驟六：將要傳送的資料編碼為URL格式。

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

步驟七：發送請求。

xhr.send(data);

四、實際應用

下面是一個具體的例子，示範如何使用Ajax傳輸兩個php檔案之間的陣列。假設我們有一個表單，使用者輸入姓名、年齡、性別等信息，然後提交表單，將這些資訊透過Ajax發送到send.php文件，並返回到receive.php文件，最後顯示出來。

程式碼如下：

<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檔案程式碼：

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

五、總結

本文介紹如何使用Ajax傳輸數組，透過一個實際的例子來示範了具體的實作過程。 Ajax不僅可以提高網頁的反應速度，還可以優化使用者體驗。透過學習本文，相信大家對Ajax及陣列傳輸有了更深入的理解與應用認識。

以上是ajax實作兩個php傳數組的詳細內容。更多資訊請關注PHP中文網其他相關文章！