質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

736閲覧

$httpサービスを使用してPOSTできない

bi_tsu

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2018/05/21 02:54

編集2018/05/22 02:17

前提・実現したいこと

monacaでログイン時の情報をPOSTして取得する箇所を制作しているのですが、
自分で書いたAngularJSでの記述ではうまく取得することができませんでした。
XMLHttpRequestを使用してPOSTするとちゃんと返ってくるのですが、
AngularJSでの記述方法がいまいち調べてもわからなかったので質問させていただいております。
headdersの記述がおかしいのか、
そもそも正しい記述がどういうものなのか
調べたのですがピンとくるような記述がなく、打開策が見つからない状況です。

該当のソースコード

JavaScript

1//AngularJSでの記述はエラーが返ってくる 2app.controller('httpController', ['$scope', '$http', function($scope, $http){ 3 var url ="https://hogehogehoge"; 4 var data = { 5 dataA : "dataA", 6 dataB : "dataB", 7 dataC : "dataC" 8 }; 9 var parseData = JSON.stringify(postData); 10 var conf = { 11 headers: { 12 "Content-Type": "application/json; charset=utf-8", 13 "Authorization": "Token token=sampleToken" 14 }, 15 }; 16 $http.post(url, parseData, conf) 17 .success(function(data, status, headers, config){ 18 $scope.response = [data, status, headers, config]; 19 }) 20 .error(function(data, status, headers, config){ 21 $scope.response = [data, status, headers, config]; 22 }); 23}]);

発生している問題・エラーメッセージ

$http.post(url, parseData, conf) .success is not a function. (In '$http.post(url, parseData, conf) .success(function(data, status, headers, config){ $scope.response = [data, status, headers, config]; })', '$http.post(url, parseData, conf) .success' is undefined)
Possibly unhandled rejection: { "data":"", "status":406, "config":{ "method":"POST", "transformRequest":[null], "transformResponse":[null], "jsonpCallbackParam":"callback", "headers":{ "Content-Type":"application/json; charset=utf-8", "Authorization":"Token token=sampleToken", "Accept":"application/json, text/plain, */*" }, "url":"https://hogehogehoge", "data":"{ \"dataA\":\"dataA\", \"dataB\":\"dataB\", \"dataV\":\"dataC\" }" }, "statusText":"Not Acceptable", "xhrStatus":"complete" }

試したこと

XMLHttpRequestを使用して記述した場合はうまく情報を取得することができました。

JavaScript

1//XMLHttpRequestではうまくいく 2function hoge() { 3 var data = { 4 dataA : "dataA", 5 dataB : "dataB", 6 dataC : "dataC" 7 }; 8 var url ="https://hogehogehoge"; 9 var parseData = JSON.stringify(data); 10 var request = new XMLHttpRequest(); 11 request.onreadystatechange = function () { 12 var READYSTATE_COMPLETED = 4; 13 var HTTP_STATUS_OK = 200; 14 if( this.readyState == READYSTATE_COMPLETED 15 && this.status == HTTP_STATUS_OK ) { 16 var resText=request.responseText; 17 var resArr = JSON.parse(resText); 18 } 19 } 20 request.open('POST', url); 21 request.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); 22 request.setRequestHeader('Authorization', 'Token token=sampleToken'); 23 request.send(parseData); 24};

補足情報(FW/ツールのバージョンなど)

質問の内容がおかしいかどうかもわかっていない状況ではございますが、
なにとぞよろしくお願いいたします。

追記 2018/05/22

406エラーになっていた部分も解決しましたので記入しておきます。
headersに記載している部分以外にデフォルトで記載される部分がありました。
$http | AngularJS 1.2 日本語リファレンス

$httpProvider.defaults.headers.common(全てのリクエストで共通): Accept: application/json, text/plain, * / *

上記の「/」の部分でエラーが起きていまして、それを削除したら
エラーが完全になくなり、期待したレスポンスが返ってきました。
※完全に自己解決ではないのでこちらに記入しております。

JavaScript

1app.controller('httpController', ['$scope', '$http', function($scope, $http){ 2 var url ='https://hogehogehoge'; 3 var data = { 4 dataA : "dataA", 5 dataB : "dataB", 6 dataC : "dataC" 7 }; 8 var parseData = JSON.stringify(data); 9 var conf = { 10 headers : { 11 "Content-Type":"application/json; charset=utf-8", 12 "Authorization": "Token token=sampleToken" 13 } 14 }; 15 16 //406エラー回避のためにこの記述が必要だった 17 delete $http.defaults.headers.common.Accept; 18 19 $http.post(url, parseData, conf) 20 .then(function(request){ 21 $scope.response = request; 22 }, 23 function(request){ 24 $scope.response = request; 25 }) 26}]);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/21 03:00

タグにある情報はタイトルに詰め込まなくても良いです。冒頭にタグと同じ情報があることで質問一覧から見たときに途中で途切れてしまい、要件が把握しずらくなっています。
bi_tsu

2018/05/21 03:02

ご指摘ありがとうございます。修正いたしました。
guest

回答1

0

ベストアンサー

この書き方は何かを参考にされて書かれているものでしょうか?
以下、私の知識が古いために間違ったことを記載するかもしれませんがご容赦ください。

$http.postの戻り値はpromiseだと思いますが、promiseにsuccessとerrorというメソッドがないためにエラーになっているのでは?
参考リンク

代わりにthenメソッドを用いれば動きませんでしょうか。
また、successcallbackとerrorcallbackの引数は1つしか設定できないと思います。
以下のような書き方でどうでしょうか。

javascript

1 $http.post(url, parseData, conf) 2 .then(function(result){ 3 $scope.response = result; 4 }, 5 function(result){ 6 $scope.response = result; 7 } 8 );

投稿2018/05/21 08:13

akabee

総合スコア1947

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bi_tsu

2018/05/21 08:54

エラーがなくなりました。ありがとうございます。 ネットで落ちていたソースで色々いじっていたので間違った情報で作業を行っていたのだと思います。 返り値のHttpPromiseという型のことも理解しておりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問