jQuery Ajax を使用してオブジェクトの配列を MVC コントローラーに適切に渡す方法

jQuery Ajax を使用してオブジェクトの配列を MVC コントローラーに送信する

jQuery の ajax() メソッドを使用してオブジェクトの配列を MVC コントローラーに送信すると、コントローラーのパラメーターが null 値を受け取る場合があります。この記事では、解決策の概要を説明します。

Null 値のトラブルシューティング

この問題は通常、データのシリアル化とコンテンツ タイプの処理が正しくないことが原因で発生します。 修正方法は次のとおりです:

1. コンテンツ タイプとデータ タイプの設定:

   ajax() 関数には明示的な contentType および dataType 設定が必要です:

   <code class="language-javascript">contentType: 'application/json; charset=utf-8',
   dataType: 'json',</code>

2. JSON シリアル化:

   オブジェクトの配列は、JSON.stringify() を使用して JSON 形式にシリアル化する必要があります。 次のようにデータを構造化します:

   <code class="language-javascript">things = JSON.stringify({ things: things });</code>

具体例

この例は、オブジェクトの配列を正常に渡す方法を示しています。

<code class="language-javascript">$(document).ready(function() {
    const things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];

    const data = JSON.stringify({ things: things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: data,
        success: function() {
            $('#result').html('"PassThings()" successfully executed.');
        },
        error: function(response) {
            $('#result').html(response.responseText); // Display error details
        }
    });
});</code>

対応するコントローラー メソッド (C# の例):

<code class="language-csharp">public void PassThings(List<Thing> things)
{
    // Process the 'things' list here
}</code>

/Home/PassThings を実際のコントローラーとアクションに置き換えることを忘れないでください。 error の代わりに failure を使用すると、より有益なエラー処理が提供されます。 この改訂されたアプローチにより、適切なデータ送信が保証され、null 値の問題が防止されます。

以上がjQuery Ajax を使用してオブジェクトの配列を MVC コントローラーに適切に渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。