XMLHttpRequestの非同期通信中にリダイレクトできない件
フォーム入力し、XMLHttpRequestで通信して登録結果メッセージを画面表示させたいのだがリダイレクト処理で設定したセッションの値（登録結果メッセージ）が画面で取得できない。
というかそもそもリダイレクトできていない。
処理の流れ
- index.blade.phpからXMLHttpRequestでProfileController.phpに非同期通信
- 登録結果メッセージをセッションに入れて遷移元画面にリダイレクト
- 画面側でセッション値（登録結果メッセージ）を表示
環境
HTML5
AngularJS v1.6.4
PHP5.6 (Laravel4.2)
Vagrant 1.9.3
Ubuntu 14.04.3 LTS
<body ng-controller="ProfileController">
@if(Session::get('success_message') != null)<div class="alert alert-success" role="alert">{{Session::get('success_message')}}</div>@endif
@if(Session::get('danger_message') != null)<div class="alert alert-danger" role="alert">{{Session::get('danger_message')}}</div>@endif
<!-- 記事投稿フォーム -->
<form id="formData" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
..
＜省略＞
..
<button class="btn btn-primary" type="button" ng-click="setArticleObj()">投稿</button>
</form>
</body>
// 投稿ボタン押下時
$scope.setArticleObj = function() {
var form = document.getElementById("formData");
var fd = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST" , URL + "article/setArticleObj");
// form送信完了後処理
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
$scope.$apply();
}
};
// FormData送信
xhr.send(fd);
};
/**
* 記事投稿機能
* @return 実行結果
*/
public function setArticleObj() {
$submitText = Input::get('article');
$userId = Sentry::getUser()->id;
$filePath = 'images/articles/';
// 記事画像アップロード
$upload = new Upload();
$response = $upload->uploadArticleImage($filePath);
// 記事アップに失敗した際にはステータスとメッセージを返す
if ($response['status'] == 1) {
return Redirect::to('/admin/edit_text')->with('message', null)->with('danger_message', '更新処理が失敗しました。');
}
// 記事登録処理
$articlesRepository = new ArticlesRepository();
$articlesRepository->insertForSubmit($userId, $submitText, $response['fileName']);
return Redirect::to('/admin/edit')->with('success_message', '更新されました。')->with('danger_message', null);
}
ステータスコードは「status:200」で成功してるはずなのでセッション値が取れてるはずなのだが取得できていない。。
xhr.open("POST" , URL + "profile/setImage", false); にして同期通信にしてみるも変化なし。
結局セッション値の取得はあきらめてXMLHttpRequest.responseを使用してメッセージを表示するようにした。（↓修正後）
修正後
<body ng-controller="ProfileController">
<div class="alert alert-success none" role="alert">@{{ success_message }}</div>
<div class="alert alert-danger none" role="alert">@{{ danger_message }}</div>
<!-- 記事投稿フォーム -->
<form id="formData" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
..
＜省略＞
..
<button class="btn btn-primary" type="button" ng-click="setArticleObj()">投稿</button>
</form>
</body>
// 投稿ボタン押下時
$scope.setArticleObj = function() {
var form = document.getElementById("formData");
var fd = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST" , URL + "article/setArticleObj");
xhr.responseType = 'json';
// form送信完了後処理
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
var message = xhr.response.message;
if (xhr.response.status == 0) {
// 成功時
$scope.success_message = message;
$(".alert-success").show();
$(".alert-danger").hide();
}else{
// エラー時
$scope.danger_message = message;
$(".alert-success").hide();
$(".alert-danger").show();
}
$scope.$apply();
}
};
// FormData送信
xhr.send(fd);
};
/**
* 記事投稿機能
* @return 実行結果
*/
public function setArticleObj() {
$submitText = Input::get('article');
$userId = Sentry::getUser()->id;
$filePath = 'images/articles/';
// 記事画像アップロード
$upload = new Upload();
$response = $upload->uploadArticleImage($filePath);
// 記事アップに失敗した際にはステータスとメッセージを返す
if ($response['status'] == 1) {
$response['message'] = '登録に失敗しました。';
return Response::json($response);
}
// 記事登録処理
$articlesRepository = new ArticlesRepository();
$articlesRepository->insertForSubmit($userId, $submitText, $response['fileName']);
$response['message'] = '登録されました。';
return Response::json($response);
}
XMLHttpRequestとリダイレクト、セッションの関係が分かったら改めて更新します。
