如何把php數組傳到js中

隨著前端與後端的分離趨勢不斷加強，前端需要與後端進行資料互動的情況也越來越多。在這種情況下，前端需要能夠取得後端處理的數據，而後端通常會以陣列的形式傳回資料。因此，如何將 PHP 數組傳到 JS 已經成為一個非常重要的問題。

本文將介紹幾種常見的傳輸 PHP 陣列的方法，讓讀者在進行前後端資料互動時更方便地取得和處理後端回傳的資料。具體方法如下：

方法一：使用 JSON

目前，在前後端資料互動時最常用的方案就是使用 JSON。 JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，易於閱讀和編寫，同時也易於機器解析和生成，非常適合於資料交換。 PHP 有一個內建函數 json_encode()，可以將 PHP 陣列轉換為 JSON 格式，然後使用 AJAX 技術將其傳輸到前端，再使用 JSON.parse() 將其轉換為 JavaScript 可以直接操作的物件。

使用PHP 程式碼將陣列轉換成JSON：

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

在前端使用AJAX 取得JSON 資料：

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

上述程式碼中，我們使用了XMLHttpRequest 物件向伺服器請求資料，並使用JSON.parse() 方法將取得到的JSON 格式字串轉換為JavaScript 物件。

方法二：使用serialize() 和unserialize()

如果我們在傳輸資料時，不需要考慮資料結構的問題，那麼serialize() 和unserialize() 函數將會是一個不錯的選擇。

serialize() 函數將變數序列化成字串，unserialize() 函數則可以將字串還原為原來的資料型態。在 PHP 中，我們可以使用 serialize() 將陣列序列化成字串，然後使用 AJAX 取得資料後再將其反序列化。

使用PHP 程式碼將陣列序列化：

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$serializedData = serialize($myArray);

在前端使用AJAX 取得序列化後的字串：

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = request.responseText;
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

接著，我們可以使用unserialize() 方法將其反序列化為PHP 物件：

$unserializedData = unserialize($serializedData);
print_r($unserializedData);

方法三：使用HTML5 data-* 屬性

如果我們只需要傳輸一些簡單的數據，並不需要使用AJAX 請求，那麼可以將PHP 陣列透過HTML5 的data- 屬性傳遞到前端。 data- 屬性是一種自訂屬性，可用於儲存頁面元素的自訂數據，從而在前端實現數據綁定。我們可以先在一個 HTML 元素上定義一個 data-* 屬性，然後在 PHP 中將資料轉換成 JSON 格式字串，最後使用 PHP 將其輸出到頁面中即可。

使用PHP 程式碼將陣列轉換成JSON，並輸出到data-* 屬性中：

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

echo '
This is my div
';

接著，我們可以透過JavaScript 取得這個元素並將data-json 屬性解析成JavaScript 對象：

var myDiv = document.getElementById("myDiv");
var jsonData = JSON.parse(myDiv.dataset.json);
console.log(jsonData);

方法四：使用AjaxTransport

有時候，我們在進行前後端資料互動時，需要自訂一些參數，以方便後端處理。在這種情況下，可以使用 jQuery 中的 AjaxTransport。 AjaxTransport 允許我們在 AJAX 請求發送前進行一些自訂操作，例如在請求頭中新增自訂的參數，來方便後端處理 PHP 陣列。

使用PHP 程式碼將陣列轉換成JSON：

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

使用者傳送AJAX 請求時，我們可以將這個JSON 資料加入到請求頭中：

$.ajaxTransport("+json", function(options, originalOptions, xhr) {
  xhr.setRequestHeader("X-JSON", json);
});

在後端PHP 中，我們可以根據請求頭中新增的自訂參數來取得PHP 陣列：

$myArray = json_decode($this->request->header('X-JSON'));

綜上所述，我們可以使用多種方法將PHP 陣列傳輸到JavaScript 中，具體應該根據具體情況選擇最適合的方案。總而言之，掌握了這些方法能夠讓開發者更有彈性地進行前後端資料交互，提升開發效率。

以上是如何把php數組傳到js中的詳細內容。更多資訊請關注PHP中文網其他相關文章！