PHPの配列をJSに渡す方法

フロントエンドとバックエンドの分離の傾向が強まるにつれ、フロントエンドがバックエンドと対話する必要があるケースがますます増えています。この場合、フロントエンドはバックエンドによって処理されたデータを取得できる必要があり、バックエンドは通常、データを配列の形式で返します。したがって、PHP の配列をどのように JS に渡すかが非常に重要な問題になります。

この記事では、読者がフロントエンドおよびバックエンドのデータを操作するときにバックエンドから返されたデータをより簡単に取得して処理できるように、PHP 配列を送信する一般的な方法をいくつか紹介します。具体的な方法は次のとおりです。

方法 1: JSON を使用する

現在、フロントエンドとバックエンドのデータ対話の最も一般的なソリューションは、JSON を使用することです。 JSON (JavaScript Object Notation) は、読み書きが簡単で、マシンによる解析と生成が容易な軽量のデータ交換形式であり、データ交換に非常に適しています。 PHP には、PHP 配列を JSON 形式に変換し、AJAX テクノロジを使用してフロントエンドに転送し、JSON.parse() を使用して JavaScript が直接操作できるオブジェクトに変換できる組み込み関数 json_encode() があります。 。

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 オブジェクトに変換します。

方法 2: Serialize() と unserialize() を使用する

データ送信時にデータ構造を考慮する必要がない場合、serialize() 関数と unserialize() 関数は 1 つになります。悪い選択ではありません。

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);

方法 3: HTML5 データ -* 属性を使用する

いくつかの単純なデータを送信するだけでよく、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);

方法 4: 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);
});

Inバックエンド PHP では、リクエスト ヘッダーに追加されたカスタム パラメーターに基づいて PHP 配列を取得できます。

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

要約すると、さまざまな方法を使用して PHP 配列を JavaScript に転送できます。特定の状況に基づいて、最適なオプションを選択してください。全体として、これらの方法を習得すると、開発者はフロントエンドとバックエンドのデータをより柔軟に操作できるようになり、開発効率が向上します。

以上がPHPの配列をJSに渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。