jQuery を使わずに AngularJS の $http サービスを使用して URL エンコードされたフォーム データを POST する方法

jQuery を使用せず $http を使用して URL エンコードされたフォーム データを POST する

AngularJS の $http サービスを使用して AJAX 呼び出しを行う場合、必要なフォーム データを送信するときに問題が発生する可能性があります。 URLエンコーディング。これは、jQuery を使用しないソリューションを探している人にとっては特にイライラする可能性があります。

問題

次のアプローチで Angular の $http サービスを使用してフォーム データを送信しようとすると、失敗します。

• データ: {ユーザー名: $scope.userName、パスワード: $scope.password}
• params: {ユーザー名: $scope.userName, パスワード: $scope.password}
• data: JSON.stringify({ユーザー名: $scope.userName, パスワード: $scope.password})

解決策

POST を正常に実行するにはURL エンコードされたフォーム データの場合は、データ オブジェクトを URL パラメーターに変換する必要があります。 Ben Nadel 氏によると、Angular はデフォルトで送信データを JSON としてシリアル化し、「application/json」コンテンツ タイプでポストします。

この動作を変更してフォーム データをポストするには、次のようにコードを更新します。

data: {username: $scope.userName, password: $scope.password}

transformRequest: function(obj) {
    var str = [];
    for(var p in obj)
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    return str.join("&");
},

このコードは、JavaScript オブジェクトを URL エンコードされた文字列に変換し、フォーム データを正常に POST できるようにします。 jQuery.

Angular 1.4 による拡張ソリューション

AngularJS v1.4 以降の場合、新しく追加されたサービスを利用すると、さらにシンプルなソリューションが提供されます:

data: {username: $scope.userName, password: $scope.password},
headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
}

以上がjQuery を使わずに AngularJS の $http サービスを使用して URL エンコードされたフォーム データを POST する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。