teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ajaxでコントローラーを実行したいが、「Unexpected token < in JSON at position 0」というエラーが出る。

編集履歴

質問編集履歴

6

参考URL

2021/09/05 03:03

投稿

kerokeroryu2631
kerokeroryu2631

スコア14

test CHANGED
File without changes
test CHANGED
@@ -21,6 +21,8 @@
21
21
  - [https://loop-never-ends.com/laravel-ajax-call-controller-method/](https://loop-never-ends.com/laravel-ajax-call-controller-method/)
22
22
 
23
23
  - [https://mintaku-blog.net/laravel-ajax/](https://mintaku-blog.net/laravel-ajax/)
24
+
25
+ - [https://noauto-nolife.com/post/laravel-ajax/](https://noauto-nolife.com/post/laravel-ajax/)
24
26
 
25
27
 
26
28
 

5

調査が進んだので、質問タイトルと内容を絞った形に変更した。

2021/09/05 03:03

投稿

kerokeroryu2631
kerokeroryu2631

スコア14

test CHANGED
@@ -1 +1 @@
1
- ajaxを使って、削除ボタンを押した時に、非同期でテーブルの行を削除したい。
1
+ ajaxでコントローラーを実行したいが、「Unexpected token < in JSON at position 0」というエラーが出る。
test CHANGED
@@ -1,20 +1,20 @@
1
1
  ### やりたいこと
2
2
 
3
- 削除ボタンを押して、押した削除ボタンのある行を（非同期で）削除したいです。
3
+ aljaxでタスクコントローラーのdelete関数を実行したいです。
4
4
 
5
-
6
-
7
- （コントローラーの削除処理はあとで自分で書こうと思いますので、とりあえずタスクコントローラーの
5
+ しかし、Chromeの開発者ツールのコンソールに、「Unexpected token < in JSON at position 0」というエラーが出る。
8
-
9
- delete関数にidを渡すところまで実装したいです。）
10
6
 
11
7
  ### 試したこと
12
8
 
13
- 削除ボタンを押したときに、ajaxのポスト通信で/delete/{id}'にidを渡して、タスクコントローラーのdelete関数を実行しようとしました。
9
+ - 渡したい値のidがjson形式と認識されていないのかと思い、JSON.stringify（）をつけてみたが、同じエラーが出た。
14
10
 
15
- しかしサイトを参考に下のように実装したのですが、ボタンを押しても何の反応もありません。
11
+ - <head>にcsrf-tokenを書いた。
16
12
 
13
+ ```ここに言語を入力
14
+
17
- 開発者ツールにエラーもありません。どうすれば実装できますでしょうか？
15
+ <meta name="csrf-token" content="{{ csrf_token() }}">
16
+
17
+ ```
18
18
 
19
19
  ### 参考にしたサイト
20
20
 
@@ -32,35 +32,13 @@
32
32
 
33
33
  ```ここに言語を入力
34
34
 
35
- <h2>計測結果</h2>
36
-
37
- <table class="table">
38
-
39
- <thead>
40
-
41
- <tr>
42
-
43
- <th scope="col">#</th>
44
-
45
- <th scope="col">タスク内容</th>
46
-
47
- <th scope="col">経過時間</th>
48
-
49
- <th scope="col">最終更新日</th>
50
-
51
- <th scope="col">編集・削除</th>
52
-
53
- </tr>
54
-
55
- </thead>
56
-
57
35
  <tbody>
58
36
 
59
37
  @foreach($tasks as $task)
60
38
 
61
- <tr id="content">
39
+ <tr>
62
40
 
63
- <td id="id">{{ $task->id }}</td>
41
+ <td>{{ $task->id }}</td>
64
42
 
65
43
  <td>{{ $task->task_name }}</td>
66
44
 
@@ -68,19 +46,19 @@
68
46
 
69
47
  <td>{{ $task->updated_at }}</td>
70
48
 
71
- <td><meta name="csrf-token" content="{{ csrf_token() }}">　　　　　　　　　　--←参考サイトを開発者ツールで見ると、これが入ってて記事を読む限り必要そうなので入れた
49
+ <td>
72
50
 
73
- <button type="button" id="edit" class="btn btn-success">編集</button>
51
+ <button type="button" id="edit" class="btn btn-success">編集</button>
74
52
 
75
- <button type="button" id="delete" class="btn btn-danger">削除</button></td>　--←削除ボタン
53
+ <button type="button" id="delete" class="btn btn-danger">削除</button>
54
+
55
+ </td>
76
56
 
77
57
  </tr>
78
58
 
79
59
  @endforeach
80
60
 
81
61
  </tbody>
82
-
83
- </table>
84
62
 
85
63
 
86
64
 
@@ -96,7 +74,7 @@
96
74
 
97
75
  var id = 1;
98
76
 
99
- // alert('OK！');
77
+
100
78
 
101
79
  $.ajax({
102
80
 
@@ -104,7 +82,7 @@
104
82
 
105
83
  // POSTのときはトークンの記述がないと"419 (unknown status)"になるので注意
106
84
 
107
- 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
85
+ 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
108
86
 
109
87
  },
110
88
 
@@ -114,21 +92,35 @@
114
92
 
115
93
  // ルーティングで設定したURL
116
94
 
117
- url: '/delete/'+ id, // 引数も渡せる
95
+ url:'/delete/' + id,
118
96
 
119
97
  dataType: 'json',
98
+
99
+ // scriptCharset : "UTF-8",
100
+
101
+ contentType: 'application/json',
102
+
103
+ data:id,
104
+
105
+
120
106
 
121
107
  }).done(function(results) {
122
108
 
123
109
  // 成功したときのコールバック
124
110
 
111
+ console.log('1');
112
+
125
113
  }).fail(function(jqXHR, textStatus, errorThrown) {
126
114
 
127
115
  // 失敗したときのコールバック
128
116
 
117
+ console.log('2'+errorThrown);
118
+
129
119
  }).always(function() {
130
120
 
131
121
  // 成否に関わらず実行されるコールバック
122
+
123
+ console.log('3');
132
124
 
133
125
  });
134
126
 

4

参考にしたサイトの変更

2021/09/05 00:49

投稿

kerokeroryu2631
kerokeroryu2631

スコア14

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  - [https://loop-never-ends.com/laravel-ajax-call-controller-method/](https://loop-never-ends.com/laravel-ajax-call-controller-method/)
22
22
 
23
- - [https://sota1235.hatenablog.com/entry/2015/10/11/213000](https://sota1235.hatenablog.com/entry/2015/10/11/213000)
23
+ - [https://mintaku-blog.net/laravel-ajax/](https://mintaku-blog.net/laravel-ajax/)
24
24
 
25
25
 
26
26
 

3

参考にしたサイトの追加

2021/09/04 16:17

投稿

kerokeroryu2631
kerokeroryu2631

スコア14

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,9 @@
18
18
 
19
19
  ### 参考にしたサイト
20
20
 
21
- [https://loop-never-ends.com/laravel-ajax-call-controller-method/](https://loop-never-ends.com/laravel-ajax-call-controller-method/)
21
+ - [https://loop-never-ends.com/laravel-ajax-call-controller-method/](https://loop-never-ends.com/laravel-ajax-call-controller-method/)
22
+
23
+ - [https://sota1235.hatenablog.com/entry/2015/10/11/213000](https://sota1235.hatenablog.com/entry/2015/10/11/213000)
22
24
 
23
25
 
24
26
 

2

目標の明確化のため

2021/09/04 16:14

投稿

kerokeroryu2631
kerokeroryu2631

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,12 @@
1
1
  ### やりたいこと
2
2
 
3
3
  削除ボタンを押して、押した削除ボタンのある行を（非同期で）削除したいです。
4
+
5
+
6
+
7
+ （コントローラーの削除処理はあとで自分で書こうと思いますので、とりあえずタスクコントローラーの
8
+
9
+ delete関数にidを渡すところまで実装したいです。）
4
10
 
5
11
  ### 試したこと
6
12
 

1

タグの追加

2021/09/04 15:16

投稿

kerokeroryu2631
kerokeroryu2631

スコア14

test CHANGED
File without changes
test CHANGED
File without changes