teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

edit

2021/02/14 09:26

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -1,4 +1,35 @@
1
1
  Ajaxは非同期通信でサーバー側の処理をさせるものなので、
2
2
  呼び出し元と呼び出し先が同じソースコードでするのは悪手でしかありません。
3
3
  できないことはないですが、画面出力とAjaxで呼び出される処理とリクエストを明示的に分ける必要があります。
4
- なぜならAjaxで呼び出された処理の「出力すべて」が返却値になるからです。
4
+ なぜならAjaxで呼び出された処理の「出力すべて」が返却値になるからです。
5
+
6
+ 提示のコードだとfooに「test」と送信された場合、返却値は下記のようになります。
7
+ ```text
8
+ test
9
+
10
+ <script type="text/javascript">
11
+
12
+ $(document).ready(function(){
13
+
14
+ var _returnValues;
15
+ function postSend() {
16
+ var fd = new FormData();
17
+ fd.append('foo',"OK");
18
+ var xhr = new XMLHttpRequest();
19
+ xhr.open('POST');
20
+ xhr.send(fd);
21
+ xhr.onreadystatechange = function(){
22
+ if ((xhr.readyState == 4) && (xhr.status == 200)) {
23
+ _returnValues = JSON.parse(xhr.responseText);
24
+ }
25
+ };
26
+ }
27
+
28
+ }
29
+
30
+ </script>
31
+ ```
32
+
33
+ もちろんこれ以外にも「出力」があればそれも全てそのままresponseTextに含まれます。
34
+ これでは当然、JSON.parseも成功しませんよね。
35
+ 構成から考え直す必要があります。