フロントエンド開発では、通常、バックエンドからデータを取得して処理する必要があります。PHP は配列データを簡単に生成でき、これらの配列データは通常、バックエンド言語として PHP を使用することを選択します。 JavaScript を通じてフロントエンド ページに表示する必要があります。次に、PHPが返す配列データをJavaScriptで取得する方法を詳しく紹介します。
- PHP を介して配列を JSON 形式に変換する
PHP では、 json_encode() 関数を使用して、配列を JSON 形式のデータに変換できます。次に例を示します。 ##
<?php
$arr = array('name'=>'张三','age'=>18);
echo json_encode($arr);
?>
ログイン後にコピー
上記のコードは配列 $arr を JSON 形式のデータに変換して出力します。出力結果は次のようになります:
{"name":"张三","age":18}
ログイン後にコピー
JavaScript で Ajax 非同期リクエストを使用して JSON 形式を取得しますPHP から返されるデータ-
JavaScript では、Ajax 非同期リクエストを使用して、PHP から返される JSON 形式のデータを取得できます。例:
var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText); //将JSON格式数据转换为JavaScript对象且存储在变量data中
console.log(data.name); //打印出name属性值"张三"
console.log(data.age); //打印出age属性值18
}
}
xhr.open('GET', 'test.php', true); //设置请求方式、请求地址、异步标识
xhr.send(); //发送请求
ログイン後にコピー
上記のコードは XMLHttpRequest オブジェクトを作成し、リクエストメソッド、リクエストアドレス、オブジェクトの非同期性を設定し、send()メソッドを通じてリクエストを送信します。リクエストのステータスが「Completed」で、リクエストのステータスコードが 200 の場合、レスポンスは正常に返されており、レスポンスの内容は xhr.responseText 属性に格納されます。次に、JSON 形式のデータを JavaScript オブジェクトに変換し、変数 data に格納します。これにより、データ オブジェクトのプロパティにアクセスすることで、PHP が返す配列データを取得できるようになります。
jQuery の $.ajax() メソッドを JavaScript で使用して、PHP から返される JSON 形式のデータを取得します。 -
jQuery の $.ajax() メソッドは、Ajax リクエストの実装をカプセル化します。非同期リクエストをより簡単に完了できます。例:
$.ajax({
type: "GET",
url: "test.php",
success: function(data) {
console.log(data.name); //打印出name属性值"张三"
console.log(data.age); //打印出age属性值18
},
dataType: "json"
});
ログイン後にコピー
上記のコードは、$.ajax() メソッドを使用して GET リクエストを送信し、リクエスト アドレスと応答データ型を JSON 形式に設定します。応答が正常に返された場合、このメソッドの success 関数は、JSON 形式のデータを JavaScript オブジェクト データに変換し、属性値を出力します。
まとめると、上記の 3 つの方法により、PHP から返される配列データを JavaScript で簡単に取得できます。ネイティブ Ajax を使用する場合でも、jQuery の $.ajax() メソッドを使用する場合でも、リクエスト メソッド、リクエスト アドレス、非同期識別子、データ型を正しく設定することで、PHP から返される JSON 形式のデータを取得し、最終的に JavaScript オブジェクトに変換して処理されます。
以上がJavaScriptでPHPから返される配列データを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。