jQuery を使用せずに AngularJS の $http を使用して URL エンコードされたフォーム データを送信するにはどうすればよいですか?

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

AngularJS では、$http を使用して AJAX リクエストを行うことが一般的に対処されるタスクです。ただし、jQuery に依存せずに URL エンコードされたフォーム データを送信するのは、初心者にとっては困難な場合があります。

失敗したアプローチ

データの使用など、前述のアプローチ: {username : $scope.userName、パスワード: $scope.password} または params: {ユーザー名: $scope.userName、パスワード: $scope.password} は実行されません。データを URL 形式で適切にエンコードします。

正しい解決策

必要な機能を実現するために、Angular の $http サービスは、送信前にカスタム データ変換を可能にするtransformRequest 関数を提供します。

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: {username: $scope.userName, password: $scope.password}
}).then(function () {});

拡張ソリューション (AngularJS V1.4 および後)

AngularJS バージョン 1.4 以降では、URL エンコード パラメーター用に特別に設計された新しいサービスが導入されました。これらのサービスを使用すると、プロセスをさらに簡素化できます:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: angular.identity,
    params: {username: $scope.userName, password: $scope.password}
}).then(function () {});

以上がjQuery を使用せずに AngularJS の $http を使用して URL エンコードされたフォーム データを送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。