teratail
回答率
85.47%
質問するログイン新規登録
トップLaravelに関する質問laravelでajaxの通信が出来ない

編集履歴

質問編集履歴

10

インデント修正

2023/04/20 11:31

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
  console.log('test');
33
33
  registerCardButton.addEventListener("click", function () {
34
34
  alert('呼び出しOK');
35
- 　　　　　　　　　　　　　 let url = "https://sample";
35
+ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　let url = "https://sample";
36
36
  let xhr = new XMLHttpRequest();
37
37
  xhr.open('POST', url, true);
38
38
  xhr.setRequestHeader('Accept', 'application/json');
LaravelJavaScriptAjax

9

インデントの修正

2023/04/20 05:14

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -31,26 +31,27 @@
31
31
  if (registerCardButton != null) {
32
32
  console.log('test');
33
33
  registerCardButton.addEventListener("click", function () {
34
- alert('呼び出しOK');
34
+ alert('呼び出しOK');
35
- 　　　　　　　　　　　　　let url = "https://sample";
35
+ 　　　　　　　　　　　　　 let url = "https://sample";
36
-
37
- 　　　　　 let xhr = new XMLHttpRequest();
36
+ let xhr = new XMLHttpRequest();
38
- xhr.open('POST', url, true);
37
+ xhr.open('POST', url, true);
39
- xhr.setRequestHeader('Accept', 'application/json');
38
+ xhr.setRequestHeader('Accept', 'application/json');
40
- xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
39
+ xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
41
- xhr.addEventListener('loadend', function () {
40
+ xhr.addEventListener('loadend', function () {
42
- if (xhr.status === 0) {
41
+ if (xhr.status === 0) {
43
- alert("接続に失敗しました");
42
+ alert("接続に失敗しました");
44
- return;
43
+ return;
45
- }
44
+ }
46
- let response = JSON.parse(xhr.response);
45
+ let response = JSON.parse(xhr.response);
47
- if (xhr.status === 200) {
46
+ if (xhr.status === 200) {
48
- console.log('通信成功');
47
+ console.log('通信成功');
49
- } else {
48
+ } else {
50
- console.log('通信失敗');
49
+ console.log('通信失敗');
51
- }
50
+ }
52
- });
51
+ });
53
- xhr.send(JSON.stringify(data));
52
+ xhr.send(JSON.stringify(data));
53
+ });
54
+ }
54
55
  ```
55
56
  ```php
56
57
  Controller側
LaravelJavaScriptAjax

8

不要な文削除

2023/04/20 04:08

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -63,7 +63,6 @@
63
63
  ```
64
64
  ### 試したこと
65
65
  alert('呼び出しOK');までは表示されますが、そこから下のajaxが実行されません。デバッグしても表示されないので、そもそも通信が実行されていないようです。
66
- ここに問題に対して試したことを記載してください。
67
66
 
68
67
  ### 補足情報（FW/ツールのバージョンなど）
69
68
 
LaravelJavaScriptAjax

7

補足追加

2023/04/20 04:07

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
  xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
41
41
  xhr.addEventListener('loadend', function () {
42
42
  if (xhr.status === 0) {
43
- alert("トークンサーバーとの接続に失敗しました");
43
+ alert("接続に失敗しました");
44
44
  return;
45
45
  }
46
46
  let response = JSON.parse(xhr.response);
@@ -62,7 +62,7 @@
62
62
  }
63
63
  ```
64
64
  ### 試したこと
65
- 【xhr.status === 200】のif文の箇所でconsole.log('通信成功');が表示されない状態です。
65
+ alert('呼び出しOK');までは表示されますが、そこから下のajaxが実行されません。デバッグしても表示されないので、そもそも通信が実行されていないようです。
66
66
  ここに問題に対して試したことを記載してください。
67
67
 
68
68
  ### 補足情報（FW/ツールのバージョンなど）
LaravelJavaScriptAjax

6

ファイル追加

2023/04/20 04:05

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,7 @@
11
11
 
12
12
  ### 該当のソースコード
13
13
  ```html
14
+ blade側
14
15
  <form method="POST" action="{{ route('register) }}" id="add_form">
15
16
  @csrf
16
17
  　<div>
@@ -24,6 +25,7 @@
24
25
  </form
25
26
  ```
26
27
  ```javascript
28
+ js側
27
29
  　<script>
28
30
  let registerCardButton = document.getElementById("register");
29
31
  if (registerCardButton != null) {
@@ -50,7 +52,15 @@
50
52
  });
51
53
  xhr.send(JSON.stringify(data));
52
54
  ```
53
-
55
+ ```php
56
+ Controller側
57
+ public function register(Request $request): RedirectResponse
58
+ {
59
+
60
+ $a = $request->all();
61
+ var_dump($a);
62
+ }
63
+ ```
54
64
  ### 試したこと
55
65
  【xhr.status === 200】のif文の箇所でconsole.log('通信成功');が表示されない状態です。
56
66
  ここに問題に対して試したことを記載してください。
LaravelJavaScriptAjax

5

インデントの修正

2023/04/20 04:03

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
  console.log('test');
31
31
  registerCardButton.addEventListener("click", function () {
32
32
  alert('呼び出しOK');
33
- 　　　　　　　　let url = "https://sample";
33
+ 　　　　　　　　　　　　　let url = "https://sample";
34
34
 
35
35
  　　　　　 let xhr = new XMLHttpRequest();
36
36
  xhr.open('POST', url, true);
@@ -50,9 +50,7 @@
50
50
  });
51
51
  xhr.send(JSON.stringify(data));
52
52
  ```
53
- ```ここに言語名を入力
53
+
54
- javascript
55
- ```
56
54
  ### 試したこと
57
55
  【xhr.status === 200】のif文の箇所でconsole.log('通信成功');が表示されない状態です。
58
56
  ここに問題に対して試したことを記載してください。
LaravelJavaScriptAjax

4

インデントの修正

2023/04/20 04:02

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
  console.logでchromeからデバッグした内容を確認した所、登録ボタンを押した後には入ってきていますが、そもそもajaxの通信が行われていません。
11
11
 
12
12
  ### 該当のソースコード
13
- ```
13
+ ```html
14
14
  <form method="POST" action="{{ route('register) }}" id="add_form">
15
15
  @csrf
16
16
  　<div>
@@ -23,11 +23,7 @@
23
23
  </x-primary-button>
24
24
  </form
25
25
  ```
26
- ```ここに言語名を入力
26
+ ```javascript
27
- html
28
- ```
29
- ### 該当のソースコード
30
- ```
31
27
  　<script>
32
28
  let registerCardButton = document.getElementById("register");
33
29
  if (registerCardButton != null) {
LaravelJavaScriptAjax

3

インデントの修正

2023/04/20 03:59

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -28,30 +28,30 @@
28
28
  ```
29
29
  ### 該当のソースコード
30
30
  ```
31
- <script>
31
+ 　<script>
32
- let registerCardButton = document.getElementById("register_card");
32
+ let registerCardButton = document.getElementById("register");
33
- if (registerCardButton != null) {
33
+ if (registerCardButton != null) {
34
- console.log('test');
34
+ console.log('test');
35
- registerCardButton.addEventListener("click", function () {
35
+ registerCardButton.addEventListener("click", function () {
36
36
  alert('呼び出しOK');
37
- let url = "https://sample";
37
+ 　　　　　　　　let url = "https://sample";
38
38
 
39
- let xhr = new XMLHttpRequest();
39
+ 　　　　　 let xhr = new XMLHttpRequest();
40
- xhr.open('POST', url, true);
40
+ xhr.open('POST', url, true);
41
- xhr.setRequestHeader('Accept', 'application/json');
41
+ xhr.setRequestHeader('Accept', 'application/json');
42
- xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
42
+ xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
43
- xhr.addEventListener('loadend', function () {
43
+ xhr.addEventListener('loadend', function () {
44
- if (xhr.status === 0) {
44
+ if (xhr.status === 0) {
45
- alert("トークンサーバーとの接続に失敗しました");
45
+ alert("トークンサーバーとの接続に失敗しました");
46
- return;
46
+ return;
47
- }
47
+ }
48
- let response = JSON.parse(xhr.response);
48
+ let response = JSON.parse(xhr.response);
49
- if (xhr.status === 200) {
49
+ if (xhr.status === 200) {
50
- console.log('通信成功');
50
+ console.log('通信成功');
51
- } else {
51
+ } else {
52
- console.log('通信失敗');
52
+ console.log('通信失敗');
53
- }
53
+ }
54
- });
54
+ });
55
55
  xhr.send(JSON.stringify(data));
56
56
  ```
57
57
  ```ここに言語名を入力
LaravelJavaScriptAjax

2

インデントの修正

2023/04/20 03:56

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -12,20 +12,22 @@
12
12
  ### 該当のソースコード
13
13
  ```
14
14
  <form method="POST" action="{{ route('register) }}" id="add_form">
15
- @csrf
15
+ @csrf
16
- 　　　　　　<div>
16
+ 　<div>
17
- <x-input-label for="card_holder_name" :value="__('氏名')" />
17
+ <x-input-label for="card_holder_name" :value="__('氏名')" />
18
- <x-text-input id="cname" class="block mt-1 w-full" type="text" name="name" :value="old('name')" />
18
+ <x-text-input id="cname" class="block mt-1 w-full" type="text" name="name":value="old('name')" />
19
- </div>
19
+ </div>
20
+ 　
20
- <x-primary-button class="ml-4" id="register">
21
+ 　<x-primary-button class="ml-4" id="register">
21
- {{ __('Register') }}
22
+ {{ __('Register') }}
22
- </x-primary-button>
23
+ </x-primary-button>
23
24
  </form
24
25
  ```
25
26
  ```ここに言語名を入力
26
27
  html
27
28
  ```
28
29
  ### 該当のソースコード
30
+ ```
29
31
  <script>
30
32
  let registerCardButton = document.getElementById("register_card");
31
33
  if (registerCardButton != null) {
@@ -51,6 +53,7 @@
51
53
  }
52
54
  });
53
55
  xhr.send(JSON.stringify(data));
56
+ ```
54
57
  ```ここに言語名を入力
55
58
  javascript
56
59
  ```
LaravelJavaScriptAjax

1

文法の修正

2023/04/20 03:54

投稿

nagi
nagi

スコア66

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,7 @@
10
10
  console.logでchromeからデバッグした内容を確認した所、登録ボタンを押した後には入ってきていますが、そもそもajaxの通信が行われていません。
11
11
 
12
12
  ### 該当のソースコード
13
+ ```
13
14
  <form method="POST" action="{{ route('register) }}" id="add_form">
14
15
  @csrf
15
16
  　　　　　　<div>
@@ -20,6 +21,7 @@
20
21
  {{ __('Register') }}
21
22
  </x-primary-button>
22
23
  </form
24
+ ```
23
25
  ```ここに言語名を入力
24
26
  html
25
27
  ```
LaravelJavaScriptAjax