jqueryのajaxが配列をバックグラウンドに渡す方法

jQuery は、豊富な機能とコンポーネントのセットを提供する人気のあるフロントエンド JavaScript フレームワークであり、その 1 つが Ajax です。 Ajax では、単一の値であっても複数の値であっても、データをバックグラウンドに渡す必要があることがよくあります。この記事ではjQueryのAjaxを使ってバックグラウンドに配列を渡す方法を紹介します。

1. 配列のシリアル化

配列を渡す前に、配列をトランスポータブル形式にシリアル化する必要があります。 jQuery の $.param() メソッドを使用すると、配列を「name=value」形式の文字列にシリアル化できます。例:

var arr = [1, 2, 3];
var param = $.param({ data: arr }); // "data%5B%5D=1&data%5B%5D=2&data%5B%5D=3"

上の例では、最初に 3 つの値を含む配列 arr を定義しました。次に $.param() メソッドを呼び出して、配列を「data」という名前のパラメータを含む文字列にシリアル化します。このパラメータの値は、配列のシリアル化された結果です。最後に、取得した param 変数にはシリアル化された文字列が含まれています。

2. シリアル化された文字列を渡す

配列を文字列にシリアル化したので、Ajax を使用してこの文字列をバックグラウンドに渡すことができます。 jQuery の $.ajax() メソッドを使用して POST リクエストを送信し、シリアル化された文字列をリクエスト パラメータとして使用できます。例:

var arr = [1, 2, 3];
var param = $.param({ data: arr });
$.ajax({
    url: "example.php",
    type: "POST",
    data: param,
    success: function(result) {
        console.log(result);
    }
});

上の例では、$.ajax() メソッドを呼び出し、いくつかのオプション パラメーターを渡しました。このうち、url はリクエストされた URL を表し、type はリクエストのタイプ (POST) を表し、data はリクエストのパラメータを表し、success はリクエストが成功した後に実行されるコールバック関数を表します。この例では、シリアル化された文字列をリクエスト パラメーターとして Ajax に渡します。

3. バックグラウンドから返された配列を受信する

バックグラウンドでは、受信したリクエスト パラメーターを解析し、シリアル化された配列データを抽出する必要があります。このタスクは、PHP の parse_str() 関数を使用して実行できます。例:

$data = array();
parse_str($_POST['data'], $data);

上の例では、まず空の配列 $data を定義し、次に parse_str() 関数を使用して $_POST 配列から「data」という名前のパラメーターを抽出します。 parse_str() 関数は、このシリアル化された文字列を PHP 配列に解析し、$data 変数に保存します。これで、この配列を内部で使用してさまざまな操作を実行できるようになります。

4. 完全な例

次に、jQuery の Ajax を使用して配列をバックグラウンドに渡し、その応答を受け取る方法を示す完全な例を見てみましょう。 ##この例では、最初に 3 つの値を含む配列 arr を定義します。次に、$.param() メソッドを使用して、文字列 param にシリアル化します。次に、$.ajax() メソッドを使用して POST リクエストを「example.php」に送信します。リクエスト パラメータは param 文字列です。

内部では、parse_str() 関数を使用してリクエスト パラメータを解析し、PHP 配列 $data に変換しました。次に、 json_encode() 関数を使用して、この配列を JSON 形式の文字列に変換し、それを応答として返します。

フロントエンドでは、jQuery の成功コールバック関数を使用して応答を受信します。この例では、応答は 3 つの文字列を含む配列です。コンソールに出力して確認してみます。

この完全な例により、jQuery の Ajax を使用して配列をバックグラウンドに渡し、その応答を受け取る方法を理解できたはずです。この例は、これらのテクニックを実際の開発に適用するのに役立ちます。

以上がjqueryのajaxが配列をバックグラウンドに渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。